如何在悬停时更改 highcharts 不透明度？

Question

如何在 Highcharts 中更改悬停点的不透明度？

我目前正在使用以下内容，尽管它非常慢且滞后，因为我运行点十六进制颜色将其转换为 RGBA。我正在使用 heatmap 图表类型。

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function () {
                    var newColor = hexToRgb(this.color);
                    var formattedColor = "rgba(" + newColor.r + "," + newColor.g + "," + newColor.b + ",0.7)";
                    this.oldColor = this.color;
                    this.update({
                        color: formattedColor
                    });
                },
                mouseOut: function () {
                    this.update({
                        color: this.oldColor,
                    });
                }
            }
        }
    }
}

有没有更简单的方法？

Answer 1

据我所知，没有开箱即用的悬停更改不透明度。您可以应用亮度，但这略有不同。

我认为拖慢您速度的部分不是转换，而是常量 update 和重绘。所有这些工作的一种可能解决方法是在图表准备好后立即进行，然后再也不做。

这方面的一个示例是图表构造的回调函数中的以下代码：

$('#container').highcharts({
    // Options
}, function() {
    for(var i = 0; i < this.series[0].data.length; i++) {
        var point = this.series[0].data[i];

        // Set the hover-color for each point once upon creation of the chart
        point.update({ 
            states: { 
                hover: { 
                    // Use the old color and change the opacity to your liking
                    color: Highcharts.Color(point.color).setOpacity(0.3).get() 
                } 
            } 
        }, false);
    }
    // Redraw once instead of on every hover
    this.redraw();
});

查看 this JSFiddle heatmap demonstration 它的外观。

Answer 2

引用的内容有错觉heatmap demo page (themed one)。

主题似乎只应用了第一个 colors 值作为热图点的悬停颜色。

所以尝试添加这个：

    colors: [null],

演示：http://jsfiddle.net/uteqzxfn/1/

如有必要，您可以更改由 colors 值覆盖的边框颜色。

    plotOptions: {
        series: {
            borderColor: '#303030'
        }
    },

如何在悬停时更改 highcharts 不透明度？

How to change highcharts opacity on hover?

javascript

jquery

highcharts