如何使用 highcharts 制作图表，从 API 加载数据

Question

我是一名新程序员，这是我第一次使用 highcharts。 我也有这样的代码使用 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 中，一些最后的数据是在 19March 中。但在图表上，最后一个数据显示的是 3 月 18 日而不是 3 月 19 日。实际上，我的 API 中没有 3 月 18 日的单一数据。您可以在上面的 URL 上查看 api。同时，之前的其他数据在图表上显示了正确的日期。 这是图表的捕获：

Answer 1

您需要将数据转换为 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