Highcharts:悬停时堆积的条形图会改变不透明度

时间:2014-09-22 15:56:44

标签: javascript css highcharts

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

如果它是一个条形图,我能够得到这个工作 悬停:{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
            }
        }
    });
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

您可以像这样定义颜色

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

每个系列。

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