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

问题描述 投票:0回答:1

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

像这样:

 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 labour et dolore magna aliqua。尽量不要抽烟,不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。不愿发生的圣人occaecat cupidatat事故,在犯有罪状的动产罪魁祸首中被禁止。

javascript highcharts
1个回答
0
投票
  1. 您可以使用xAxis.categories功能将此数组分配给xAxis,但是categoryes功能仅适用于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一月

  1. 我认为更好的方法是创建一些解析函数,该函数将合并您的数据和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])
© www.soinside.com 2019 - 2024. All rights reserved.