如何使用多个嵌套 json 对象创建 amcharts

Question

您好，我正在使用 amcharts，我想使用 dataloader 插件创建 amchart，api 响应具有嵌套对象。我试过了，但它不会工作。我的 json 回复是这样的。我还想将 24 小时时间转换为 12 小时时间（插槽 json）我如何使用数据加载器插件
使用此类 json 创建图表 Fiddle

         {
        "driver_data": [
            {
                "slot": 0,
                "rideCount": 0
            },
            {
                "slot": 30,
                "rideCount": 0
            },
            {
                "slot": 100,
                "rideCount": 0
            },
            {
                "slot": 130,
                "rideCount": 0
            },
            {
                "slot": 200,
                "rideCount": 0
            }
        ],
        "passenger_data": [
            {
                "slot": 0,
                "rideCount": 0
            },
            {
                "slot": 30,
                "rideCount": 0
            },
            {
                "slot": 100,
                "rideCount": 0
            },
            {
                "slot": 130,
                "rideCount": 0
            },
            {
                "slot": 200,
                "rideCount": 0
            },
            {
                "slot": 230,
                "rideCount": 0
            },

        ]
    }

Answer 1

仅供参考 - AmCharts 不支持嵌套 JSON 数据。你需要先转换它。

您需要做的第一件事实际上是包含 dataloader.min.js 文件。 dataLoader是一个外部插件，就像export一样，所以它需要一个单独的include。

<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

其次，确保您在图表 div 上设置了 CSS。您的 fiddle.

中没有

#ridecounts {
    width: 100%;
    height: 500px;
}

最近，您需要在数据加载器中使用 postProcess 回调来创建兼容的 JSON 格式 - 由 categoryField 分组的单个扁平数组。由于您根据数组键名称命名了 valueField 属性，因此当您将数据重新格式化为对象数组

时，将这些属性设为 valueField

dataLoader: {
    url: "...",
    // ...
    postProcess: function(jsonResponse, dataLoaderConfig, chart) {
      var categoryField = chart.categoryField;
      var newData = [];
      var groupedData = {};
      Object.keys(jsonResponse).forEach(function(arrayKey) {
        jsonResponse[arrayKey].forEach(function(dataItem) {
          if (!groupedData[dataItem[categoryField]]) {
            groupedData[dataItem[categoryField]] = {};
            groupedData[dataItem[categoryField]][categoryField] =
              dataItem[categoryField];
          }
          groupedData[dataItem[categoryField]][arrayKey] = dataItem.rideCount;
        });
      });
      Object.keys(groupedData).forEach(function(groupedKey) {
        newData.push(groupedData[groupedKey]);
      });
      return newData; //returns [{slot: 0, driver_data: 0, passenger_data: 0}, ...]
    }
}

Codepen。

我不确定你所说的转换 12/24 小时格式是什么意思，因为你的数据不是基于日期时间的。

如何使用多个嵌套 json 对象创建 amcharts

how to create amcharts with multiple nested json objects

ajax

jquery

json

amcharts