如何使用多个嵌套的json对象创建amcharts [英] how to create amcharts with multiple nested json objects

问题描述

你好，我正在使用amcharts，我想使用dataloader插件来创建amchart，api响应具有嵌套对象.我试过了，但是行不通. 我的json响应是这样的.我也想将24小时时间转换为12小时时间(json中的插槽) 如何使用Dataloader插件使用此类型的json创建图表
小提琴

Hello I'm using amcharts, i want to creat amchart using dataloader plugin, api response having nested object. I tried it, but it wont work. My json response in like this. Also i want to convert 24hrs time to 12 hrs time (Slot in json) How do i create chart using this type of json using dataloader plugin
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
            },

        ]
    }

推荐答案

仅供参考-AmCharts不支持嵌套的JSON数据.您需要先对其进行转换.

FYI - AmCharts does not support nested JSON data. You need to convert it first.

您需要做的第一件事实际上是包含dataloader.min.js文件. dataLoader是一个外部插件，就像导出一样，因此需要单独的包含.

First thing you need to do is actually include the dataloader.min.js file. The dataLoader is an external plugin, just like export, so it requires a separate include.

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

第二，确保在图表div上设置了CSS.您的小提琴里没有任何东西.

Second, make sure you have CSS set on your chart div. You don't have any in your fiddle.

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

通常，您需要使用> postProcess 回调以创建兼容的JSON格式-由categoryField分组的单个扁平数组.由于您是根据数组键名来命名valueField属性的，因此，当您将数据重新格式化为对象数组时，将其设置为valueField

Lastely, you need to use a postProcess callback in your dataLoader to create a compatible JSON format - a single flattened array grouped by your categoryField. Since you named your valueField properties based on the array key names, make those your valueField when you reformat your data into an array of objects

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小时格式是什么意思，因为您的数据不是基于日期时间的.

I'm not sure what you mean by converting 12/24 hour format as your data is not datetime based.

这篇关于如何使用多个嵌套的json对象创建amcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！