Question

我使用highcharts在我的网站上显示地图，线条和条形图。在折线图中，当我将鼠标悬停在图例上时，相应的线条突出显示。我想对我的条形图做同样的事情，这样当我将鼠标悬停在图例上时，条形高亮显示当我将鼠标悬停在条形图上时它突出显示的方式。我怎样才能做到这一点？

Answer 1

一种可能的解决方案是为每个hover和此函数内部定义legend-item函数，为相关系列的所有点切换.setState('hover')。如下：

var chart = new Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with negative values'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: true
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5]
    }]
});



$('.highcharts-legend-item').each(function(index, element) {
    $(element).hover(function() {
        $.each(chart.series[index].points, function(idx, elem)
        {
        elem.setState('hover');
        });
    },function() {
        $.each(chart.series[index].points, function(idx, elem)
        {
        elem.setState();
        });
    })
});

<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts传说悬停在条形图上？

1 个答案: