как создать amcharts с несколькими вложенными объектами json - PullRequest
Новая
       8

как создать amcharts с несколькими вложенными объектами json

0 голосов
/ 14 сентября 2018

Здравствуйте, я использую amcharts, я хочу создать amchart, используя плагин dataloader, api response имеет вложенный объект. Я попробовал, но это не сработает. Мой ответ JSON, как это. Также я хочу конвертировать время в 24 часа в 12 часов (слот в формате json) Как создать диаграмму, используя этот тип json, используя плагин dataloader
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
            },

        ]
    }

1 Ответ

0 голосов
/ 14 сентября 2018

FYI - AmCharts не поддерживает вложенные данные JSON. Вы должны сначала преобразовать его.

Первое, что вам нужно сделать, это включить файл dataloader.min.js. DataLoader - это внешний плагин, также как и экспорт, поэтому он требует отдельного включения.

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

Во-вторых, убедитесь, что у вас установлен CSS на вашем графике div. В твоей скрипке их нет. 

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

Последнее, вам нужно использовать обратный вызов postProcess в вашем dataLoader для создания совместимого формата 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 часа, поскольку ваши данные не основаны на дате и времени.

...