Highcharts

Question

当我将鼠标移到HighChart图表上时，我需要突出显示（整个）当前列带。我使用动态绘图带获得了如下（JSFiddle here，来自基本演示图表的改编）：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            plotBands: [{from:1,to:1}],
        },
        plotOptions:{
        series: {
          point: {
            events: {
                mouseOver: function () {moveBand(this.index);}
            }
          }
        }
        },
        series: [{
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }]
    });

function moveBand(a) {
var chart = $('#container').highcharts();
chart.xAxis[0].update({plotBands:[{color: '#f0c0c0',from:a-0.5,to:a+0.5}]});
}    
});

由于这个解决方案在我的真实图表中有点慢（包含几十个点和几个系列），我想问这是否是满足我需求的最佳方式，或者有更好的解决方案。

Answer 1

您可以在xAxis上启用十字准线。

xAxis: {
    crosshair: true
}

示例：http://jsfiddle.net/da70aofL/