如何在悬停时更改高图的不透明度

How to change highcharts opacity on hover?

本文关键字：高图 不透明度 悬停      更新时间：2023-09-26

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

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

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,
                    });
                }
            }
        }
    }
}

有什么更简单的方法吗？

引用的热图演示页面（主题页面）中有一个幻觉。

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

所以试着添加这个：

    colors: [null],

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

如有必要，可以更改由colors值替代的边框颜色。

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

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

我认为让你慢下来的不是转换，而是常量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();
});

请参阅此JSFiddle热图演示。

相关文章：