Как установить эффекты яркости для определенных столбцов на столбчатой ​​диаграмме с накоплением при использовании Highcharts?

Question

Я пытаюсь дать эффект яркости для определенных столбцов на гистограмме с накоплением, используя Highcharts.

Я хочу развить эффект как «РЕШЕНИЕ» справа на изображении ниже.

Теперь при наведении курсора на серию или столбец, то есть на Apple-John, видно, что яркость всего бара изменяется

Код: HTML равен

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Код: JavaScript - это

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        },
        series: {
                states: {
                    hover: {
                        brightness: -0.3
                }
            }
        }
    },
    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]
    }]
});

То, что я хочу сделать, это дать яркость четырем столбцам Джона при наведении курсора на любой из столбцов Джона: все столбцы небесно-голубого цвета;если я наведу курсор на один из столбцов Джейн, необходимо изменить яркость всех столбцов Джейн: пять черных столбцов в группе Джейн.

Answer 1

Достаточно установить непрозрачность для элемента .highcharts-column-series rect :

.highcharts-column-series:hover rect {
  opacity: 0.7;
}

Также вы можете отключить яркость по умолчанию:

series: {
  states: {
    hover: {
      brightness: 0
    }
  }
}

jsFiddle: https://jsfiddle.net/BlackLabel/2m8t6knh

Answer 2

С помощью css вы можете достичь этого, сначала добавьте className в данные серии следующим образом (вы можете объявить имя как хотите, я использую имя в качестве className)

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    className:'John'
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1],
    className:'Jane'
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    className:'Joe'
}]

После того как вы добавите className, после рендеринга вы найдете имя в элементе Highcharts, вам нужно добавить цвет, который вы хотите отобразить в hove, используйте для этого fill .

Пример:

#container .highcharts-container .highcharts-series-group .John:hover rect{
   fill: rgb(230, 44, 118);
}

Ссылка Jsfiddle: http://jsfiddle.net/karnan796/2fruqw7j/12/