Легенда о Highcharts для гистограммы?

Question

Я использую высокие графики для отображения карты, линий и гистограмм на моем сайте.На линейном графике при наведении курсора на легенды выделяется соответствующая линия.Я хочу сделать то же самое для моей гистограммы, чтобы при наведении курсора на легенду полоса подсвечивалась так же, как при подсветке самой полосы.Как я могу это сделать?

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>