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

引用heatmap demo page (themed one)中有一种错觉。

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

所以尝试添加：

    colors: [null],

DEMO：http://jsfiddle.net/uteqzxfn/1/

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

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

Answer 2

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

我认为减慢你速度的部分不是转换，而是常量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的外观。

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

2 个答案: