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"}]
});

問題在於，圖形懸停不在列的中間（參見圖片）。 我不明白為什么鼠標懸停在列值上方的行不在列的中間。 它在列的右側。

范例圖片

我究竟做錯了什么？

Answer 1

默認情況下，Highstock中啟用了分組機制。 這會導致每個x值都為每個系列的一列保留空間（在這種情況下為3）。 即使形成第二個和第三個系列的所有點的y值均為0，Highcharts的行為也好像它們是可見的。

隱藏第二個和第三個系列，以第一個系列為中心查看各列。

要獲得效果而不隱藏任何系列，只需禁用分組即可：

  plotOptions: {
    column: {
      grouping: false
    }
  }

現場演示： http ： //jsfiddle.net/kkulig/2hLpgn0t/

---

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