javascript - 单个数组时间戳作为多个系列的 xAxis

问题描述

我是 Java 脚本和 highcharts 的新手。如何将时间戳放入所有系列的单独共享数组中？

像这样：

 xAxis: { 
        data: [1577203210, 1577206808, 1577210408]
        }

       series: [{
                    name: 'one',
                    data: [1, 21, 8],
                },
                {
                    name: 'two',
                    data: [2,4,6],
                }]

我现在拥有的

Highcharts.stockChart('container', {
  title: {
    text: 'Stock Price'
  },
  series: [{
      name: 'one',
      data: [
        [1577203210, 1],
        [1577206808, 21],
        [1577210408, 8],
      ],
    },
    {
      name: 'two',
      data: [
        [1577203210, 2],
        [1577206808, 4],
        [1577210408, 6],
      ],
    }
  ]
});

<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; min-width: 310px"></div>

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。

标签： javascripthighcharts

您可以使用xAxis.categories功能将此数组分配给 xAxis，但类别功能仅适用于 Highcharts（不是 Highstock），但是，您应该能够使用 Highstock 脚本将选项从 Highstock 合并到 Highcharts。此解决方案的缺点是标签和工具提示以数字格式获取这些值，而不是数据时间。

演示：https ://jsfiddle.net/BlackLabel/ye1rxw49/

    let timestamp = [1577203210, 1577206808, 1577210408];

    Highcharts.chart('container', {
      title: {
        text: 'Stock Price'
      },

      xAxis: {
        categories: timestamp
      },
      ...
    });

要在数据时间中显示 x 值，您需要使用一些解析函数，如下所示：

演示：https ://jsfiddle.net/BlackLabel/2j3yswn5/

let categoriesTimeStamp = timestamp.map((val) => new Date(val).toUTCString())

然而，这个解决方案仍然不是完美的，因为rangeSelector不能很好地与类别一起工作 - 你可以看到范围是从 1970 年 1 月 1 日到 1970 年 1 月 1 日，而标签是 19 Jan。

我认为更好的方法是创建一些解析函数来合并您的数据和 xAxis 数据数组。

像这样的东西：https ://jsfiddle.net/BlackLabel/woht0vpk/

let data1 = [1, 21, 8],
        data2 = [2,4,6],
    xAxisData = [1577203210, 1577206808, 1577210408];

 data1 = data1.map((val, i) => [xAxisData[i], val])
 data2 = data2.map((val, i) => [xAxisData[i], val])

javascript - 单个数组时间戳作为多个系列的 xAxis

问题描述

解决方案

推荐阅读