Динамическая диаграмма с данными JSON - CanvasJS - PullRequest
Новая
       124

Динамическая диаграмма с данными JSON - CanvasJS

0 голосов
/ 30 августа 2018

У меня проблема с генерацией диаграммы с CanvasJS .

В основном я получаю данные из API, я могу видеть и проверять массив JSON, но когда я собираюсь сгенерировать dataPoint для графика, я получаю 2 ошибки: недопустимые данные в поле данных и NaN в поле значений.

Может кто-нибудь дать мне подсказку? 

// Fetching the data
fetch('https://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
 var jsonData = data;
 // Generating Data Points
 var dataPoints = [];

for (var i = 0; i <= jsonData.length - 1; i++) {
    dataPoints.push({ y: new Date(jsonData[i].source_ts), x: Number(jsonData[i].renewablesobligationconsumption) });
    console.log(dataPoints);
}

var chart = new CanvasJS.Chart("chartContainer", {
    data: [
        {
            dataPoints: dataPoints,
            type: "line",
        }
    ]
});

chart.render();
}).catch(err => {
 throw new Error( 'Impossible to get data' );
});

Здесь код https://jsfiddle.net/azacrown/qkhb0dv3/

Приветствия

1 Ответ

0 голосов
/ 30 августа 2018

Вы не правильно вводили молчание в течение data, из-за чего получали y:null и x:NaN.

Содержимое внутри data - это массив объектов внутри массива , т. Е. [[{}, {}, {}...]], поэтому вам нужно выполнить итерацию соответственно.

Используйте этот код: 

  data.forEach(function(array) {
    array.forEach(function(arrayItem) {
      dataPoints.push({
        y: new Date(arrayItem.source_ts),
        x: Number(arrayItem.renewablesobligationconsumption)
      });
    });
  });

Ниже приведен полный рабочий пример. Теперь ваш dataPoints готов, вы можете использовать его где угодно: 

// Fetching the data
fetch('https://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi').then(response => {
  return response.json();
}).then(data => {

  // Generating Data Points
  var dataPoints = [];

  data.forEach(function(array) {
    array.forEach(function(arrayItem) {
      dataPoints.push({
        y: new Date(arrayItem.source_ts),
        x: Number(arrayItem.renewablesobligationconsumption)
      });
    });
  });
  
 console.log(dataPoints);

  var chart = new CanvasJS.Chart("chartContainer", {
    data: [{
      dataPoints: dataPoints,
      type: "line",
    }]
  });

  chart.render();
}).catch(err => {
  throw new Error('Impossible to get data');
});
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
...