多个x轴的Highcharts工具提示位置错误

Question

我有一个图表，其中有两个并排的 x 轴，每个轴都有一个系列。当我漂浮在 Series 1 数据上时，我看到了工具提示，正如预期的那样。当我漂浮在系列 2 数据上时，它会突出显示该行，但没有工具提示。但是，如果我将光标向左移动到与系列 2 数据中的数据相同的高度，但在系列 1 数据上方，工具提示会显示系列 2 信息，并且系列 2 点会突出显示。这是一个例子：

http://jsfiddle.net/q0gphwx2/5/

有没有办法解决这个问题？

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },

    plotOptions : {
        area : {
            stacking : 'normal',
        }
    },

    title: {
        text: 'Tooltip Hover Anomoly'
    },
    subtitle: {
        text: 'Float over Series 2 data, then stay at same height, but over series 1.  '
    },
    xAxis: [{
        width:300,
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },{
        left: 400,
        width: 300,
        offset:0,
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }

           ],
    yAxis: [{ // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    }],
    tooltip: {
        shared: false
    },
    series: [{
        name: 'Series 1',
        type: 'line',
        xAxis: 0,
        stack: 0,            
        data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30],
        tooltip: {
            valueSuffix: ' mm'
        }

    }, {
        name: 'Series 2',
        type: 'line',
        xAxis: 1,
        stack: 1,
        data: [100, 120, 100, 120, 100, 120, 100, 120, 100, 120, 100, 120],
        tooltip: {
            valueSuffix: ' mm'
        }

    }]
});
});

Answer 1

不幸的是，它是已知的错误，已报告给我们的开发人员here

Answer 2

像这样添加第二个轴（使用宽度、左、偏移量等）只是为了间隔两年似乎很成问题。相反，使用一个轴，将类别扩展到两组月份，然后在第 12 点开始第二个系列：

   xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                     'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],

    series: [{
        name: 'Series 1',
        type: 'line',           
        data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30],
        tooltip: {
            valueSuffix: ' mm'
        }

    }, {
        name: 'Series 2',
        type: 'line',
        pointStart: 12, // start this one at 12
        data: [100, 120, 100, 120, 100, 120, 100, 120, 100, 120, 100, 120],
        tooltip: {
            valueSuffix: ' mm'
        }

    }]

更新fiddle。