javascript - Highcharts : Stacked barchart on hover change the opacity

Question

我正在使用 Highcharts 中的堆积条形图。现在图表的不透明度是 .3 或 30%；悬停时我想将不透明度更改为 100% 或 1；我想保持相同的颜色。

如果它是条形图，我可以通过这样做来完成这项工作hover: {color: 'rgba(161, 163, 163, 1)' }

我对堆叠条形图有疑问。

  $(container).highcharts({
        chart: {
            type: 'column',
            marginTop: 70,
            marginRight: 100,
            marginLeft: 70
                    //width: 1000
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: displayData,
            labels: {
                rotation: -90
            }
        },
        yAxis: {
            min: 0,
            ceiling: 100,
            title: {
                text: ''
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>';
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            },
            area:
            {
                fillOpacity:.99
            },
            series: {
                stacking: 'normal',
                states: {
                    hover: {
                        lineWidthPlus: 5

                    }
                }
            }
        },
        series: [{
                name: '% of ' + firstSeriesName,
                data: firstSeriesData,
                color: 'rgba(227, 24, 55, .3)',
                borderRadiusTopLeft: 3,
                borderRadiusTopRight: 3
            },
            {
                name: '% of ' + secondSeriesName,
                data: secondSeriesData,
                color: 'rgba(64, 154, 64, .3)',
                borderRadiusTopLeft: 3,
                borderRadiusTopRight: 3
            }],
        navigation: {
            buttonOptions: {
                height: 40,
                width: 48,
                symbolSize: 24,
                symbolX: 23,
                symbolY: 21,
                symbolStrokeWidth: 2,
                borderRadiusTopLeft: 5,
                borderRadiusTopRight: 5
            }
        }
    });

Answer 1

你可以这样定义颜色

states: {
  hover: {
    color: 'rgba(68, 188, 93, 1)'
  }
}

在每个系列中。

基于您的代码的示例 - http://jsfiddle.net/tosx33ae/1/