Highstock xAxis 日期时间指针线

Question

我有这个 Highstock 配置：

Highcharts.stockChart('container', {
chart: {
    // type: 'spline',
    type: 'column',
    animation: Highcharts.svg, // don't animate in old IE
    zoomType: 'x',
},
rangeSelector: {
    enabled: false,
},
title: {
    text: "Title"
},
xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
    },
    labels: {
        align: 'left',
        x: 3,
        y: -3,
    },
    // TODO: fix that f*****g timezone
    min: new Date('01/01/2018').getTime() + 7200000,
    max: new Date('10/01/2018').getTime() + 7200000,
    crosshair: true,
    tickInterval: 3600 * 1000 * 24,
},

yAxis: [
    {
        opposite: false,
        title: {
            text: "Energy",
            style: {
                color: '#F2A9A9'
            },
        },
        labels: {
            align: 'left',
            format: '{value:.,0f}',
            style: {
                color: '#F2A9A9'
            },
        },
    },
],

tooltip: {
    shared: true,
    crosshair: true
},
legend: {
    enabled: true,
},
series: [{"color": "#F2A9A9", "data": [{"y": 210.0, "x": 1514771237000}, {"y": 120.0, "x": 1515052404000}, {"y": 90.0, "x": 1515221072000}, {"y": 0.0, "x": 1515311127000}], "name": "Energy (MWh)"}, {"color": "deepskyblue", "data": [{"y": 0.0, "x": 1514788069000}, {"y": 0.0, "x": 1514868337000}, {"y": 0.0, "x": 1515074982000}], "name": "Energy (MW)"}, {"color": "#90ed7d", "data": [{"y": 0.0, "x": 1514788069000}, {"y": 0.0, "x": 1514868337000}, {"y": 0.0, "x": 1515074982000}], "name": "Volume"}]
});

问题是图表悬停不在列的中间（见图）。我不明白为什么鼠标悬停在列值上的线不在列的中间。就是在柱子右边一点点。

Example image

我做错了什么？

Answer 1

默认情况下分组机制在 Highstock 中启用。它导致每个 x 值都为每个系列中的一列保留 space（在本例中为 3）。即使构成第二个和第三个系列的所有点的 y 值都为 0，Highcharts 的行为就好像它们是可见的。

隐藏第二个和第三个系列以查看第一个系列中的列居中。

要在不隐藏任何系列的情况下实现这种效果，只需禁用分组即可：

  plotOptions: {
    column: {
      grouping: false
    }
  }

现场演示： http://jsfiddle.net/kkulig/2hLpgn0t/

API参考：https://api.highcharts.com/highcharts/plotOptions.column.grouping

Highstock xAxis 日期时间指针线

Highstock xAxis datetime pointer line

javascript

highcharts

highstock