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值都为每个系列的一列保留空间（在本例中为3）。即使所有点形成第二个和第三个系列都有0作为y值，Highcharts表现得好像它们是可见的。

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

要在不隐藏任何系列的情况下获得该效果，只需禁用分组：

  plotOptions: {
    column: {
      grouping: false
    }
  }

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

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

Highstock xAxis日期时间指针线

1 个答案: