如何使用我们的时间戳从Highcharts中的API用我们自己的时间戳数据替换x轴

Question

这是我第一次使用高图。我有点困惑，因为上次我使用Chart.js。我希望我的图表可以显示每月，每周，每年和每天的数据。我希望它有日期选择器。因此，我尝试搜索一些示例。最后我自己做。但是没有选择显示每周和每天的数据。图的x轴不是来自我自己的数据。如何使我的X轴使用自己的时间戳API数据？以及如何更改显示每天，每周和每月数据的选项？

这是我的代码：https://jsfiddle.net/estri012/y1usoxd7/6/

任何人请帮助我。我是一个新手程序员，但编程仍然有很多问题。但这是我的学校任务。所以我需要完成它。谢谢！

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


<div id="container" style="height: 400px"></div>

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
        }
    }]
 });
 });

Answer 1

• 这里是API选项，如何设置范围选择选项：https://api.highcharts.com/highstock/rangeSelector.buttons

• 问题的第二部分-Highcharts需要以下格式的数据：

  • 值数组-如：[10,20,30,40]-Highcharts将其读取为y值数组并设置默认x值-1, 2, 3, 4

  • [arrays array-like：[[3, 24], [5, 42], [8,33]]-其中数组中的第一个值是x，第二个值是y-[x, y]

  • 对象数组-如：[{x: 3, y: 24}, {x: 5, y: 42}]-这很明显

xAxis可以是数据时间类型，其中x值是毫秒格式的值，这意味着您需要将数据转换为毫秒值才能进行设置，例如：https://jsfiddle.net/BlackLabel/w9hznsey/

Answer 2

使用highchart股票图表的想法是，它使用x轴标签作为时间戳。

“如何使我的X轴使用我自己的时间戳API数据的解决方案？应该通过解析为实时时间戳并创建'accelero_x'的嵌套数组并将该数组传递给序列来转换data [i] .timestamp数据。

Highcharts.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
var accelero_x = [], timestamp = [];
      for (var i=0; i<data.length; i++){
      //modification start -----
      let inArr = [];
      let trimDate = data[i].timestamp.split('T')[0]; // here we have many ways to extract only the date correctly
      inArr.push(Date.parse(trimDate));
      inArr.push(data[i].accelero_x);
        accelero_x.push(inArr);
      //modification end -----
        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/jinny/jrhz3ty7/20/