Как сделать график с высокими графиками, загрузить данные из API - PullRequest
Новая
       12

Как сделать график с высокими графиками, загрузить данные из API

1 голос
/ 28 апреля 2020

Я новый программист, и я впервые использую старшие чарты. У меня есть такой код, используя библиотеку highstocks: 

Highcharts.getJSON('https://gmlews.com/api/data', function(data) {
  console.log(data);
  var accelero_x = [],
    timestamp = [];
  for (var i = 0; i < data.length; i++) {
    accelero_x.push(data[i].accelero_x);
    timestamp.push(data[i].timestamp);
  }
  console.log(accelero_x);
  console.log(timestamp);
  // Create the chart
  Highcharts.stockChart('container', {

    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'Accelero X'
    },

    series: [{
      name: 'Accelero X',
      data: accelero_x,
      type: 'spline',
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});

Вы можете увидеть полный рабочий код на: https://jsfiddle.net/estri012/y1usoxd7/1/

Проблема в том, как сделать Оси X на основе моей метки времени?

Новая проблема после получения правильных осей X: в моем API некоторые из последних данных находятся в 19 марта. Но на графике последние данные показывают 18 марта, а не 19 марта. На самом деле в моем API нет ни одной отдельной информации о 18 марта. Вы можете проверить API на URL выше. Между тем другие данные перед тем показывают правильную дату на графике. Это захват графика: Chart

1 Ответ

1 голос
/ 28 апреля 2020

Вам необходимо преобразовать ваши данные в формат, требуемый Highcharts, в вашем случае - массив массивов или массив объектов ({x, y}). 

Highcharts.getJSON('https://gmlews.com/api/data', function(data) {
  var seriesData = [];

  for (var i = 0; i < data.length; i++) {
    seriesData.push([
      new Date(data[i].timestamp).getTime(),
      data[i].accelero_x
    ]);
  }

  // Create the chart
  ...
});

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/82vqcwsr/

Справочник по API: https://api.highcharts.com/highstock/series.line.data

...