HighCharts 使用 YAxis 和时间戳

Question

我需要显示对象（每个对象都有一个双条形图）。对象的结构是：

{
dates: (5) ["2018-12-26", "2018-12-27", "2018-12-28", "2018-12-31", "2019-01-02"]

formattedDates: (5) ["2018/12/26", "2018/12/27", "2018/12/28", "2018/12/31", "2019/01/02"]

formatPoints2: (5) [1545945000000, 1546026562061, 1546284847056, 1546465543023, 1546545993086]

points: (5) ["2018-12-27T10:36:24.893", "2018-12-28T17:29:56.517", "2018-12-31T05:48:41.587", "2019-01-01T10:10:09.683", "2019-01-03T10:36:42.002"]

points2: (5) ["2018-12-27T16:10", "2018-12-28T14:49:22.061", "2018-12-31T14:34:07.056", "2019-01-02T16:45:43.023", "2019-01-03T15:06:33.086"]

formatPoints: (5) [1545924984893, 1546036196517, 1546253321587, 1546355409683, 1546529802002]
}

我冒昧地使用 date.getTime() 转换点和点 2 数组以获取 formatPoints 和 formatPoints2

我需要做的是绘制时间戳的 时间 与 日期。

e.g. points[0] = 2018-12-27T10:36:24.893, dates[0] = 2018-12-26
plot 10:36:24 vs 2018-12-26 and so on for each time in the array

当您将鼠标悬停在该点的条上时，我需要在图表上的工具提示 (2018-12-27T10:36:24.893) 中显示完整的时间戳

图表是一个双条形图，其中 points&points2 是针对日期绘制的。

Answer 1

在您的情况下，关键是设置正确的轴类型。对于yAxis 上的时间戳值，最佳类型将是datetime 和xAxis - category 上的日期。请检查下面的示例，如果一切正常，请告诉我。

var series = [{data: []}, {data: []}];

data.points.forEach(function(point, i){
    series[0].data.push({
        name: data.formattedDates[i],
        tooltipText: data.points[i],
        y: data.formatPoints[i]
    });

    series[1].data.push({
        name: data.formattedDates[i],
        tooltipText: data.points2[i],
        y: data.formatPoints2[i]
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    xAxis: {
        type: 'category'
    },
    tooltip: {
        pointFormat: '{point.tooltipText}'
    },
    yAxis: {
        min: 1545945000000,
        max: 1546529802002,
        type: 'datetime'
    },
    series: series
});

现场演示：http://jsfiddle.net/BlackLabel/asm64f5r/

API：https://api.highcharts.com/highcharts/xAxis.type