时间戳

首页 > 解决方案 > 具有相同日期的 Highchart 组图表点

javascript - 具有相同日期的 Highchart 组图表点

问题描述

我有一个带有两个 yAxis 的图表。我希望两者都按日期分组。但在我的图表中，两个系列的最后一个值都以不同的 xAxis 线结束。我认为这是因为时差。我需要根据日期对这些点进行分组，以便两个系列的最后一个点在 xAxis 的同一行中对齐。这是我的 JavaScript 代码。

Highcharts.stockChart('container', {
            yAxis: [{
                title: {
                  text: 'y axis 1',
                },
                opposite: false,
                showEmpty: false,
              },
              {
                title: {
                  text: 'y axis 2',
                },
                opposite: true,
                showEmpty: false,
              }, 
            ],
            series: [{
              yAxis: 0,
              data: series1,
            },
            {
                yAxis: 1,
                data: series2,
              },
            ],  
          });

这是我的 jsfiddle。谁能帮帮我吗？

标签： javascripthighchartstimestamplinechart

解决方案

您可以遍历您的数据并将时间戳四舍五入到最近的日期：

function roundDate(timeStamp) {
    timeStamp -= timeStamp % (24 * 60 * 60 * 1000); //subtract amount of time since midnight
    return new Date(timeStamp).getTime();
}

function loopThroughData(data) {
    data.forEach(function(el) {
        el[0] = roundDate(el[0])
    });
}

loopThroughData(series1);
loopThroughData(series2);

现场演示： https ://jsfiddle.net/BlackLabel/zhbt4gmw/

有用的线程： 将时间戳四舍五入到最近的日期

推荐阅读