高图表.js添加鼠标悬停功能或悬停状态(实现中断图表?

highcharts.js add mouseOver function or hover states (implement breaks chart?)

本文关键字：悬停 中断 实现 添加 js 鼠标 功能 高图表 状态      更新时间：2023-09-26

集成悬停状态或鼠标悬停功能后，图表只是中断。关于如何成功实现颜色悬停状态的任何建议？(是否可以为每个 3 个部分中的每一个部分设置不同的颜色悬停状态，所以 3 个？

   series: [{
        point: {
        events: {
            click: function(e) {
                location.href = e.point.url;
                e.preventDefault();
                }
            }
            mouseOver: function () { // hover attempt added here?
                this.options.oldColor = this.color;
                this.graphic.attr("fill", "black");
            },
            mouseOut: function () {
                this.graphic.attr("fill", this.options.oldColor);
                }
            } // hover attempt with this snippet broke chart?
        },
        innerSize: '30%',
        data: [
            {name: 'Shop', y: 10, url: '/#pie2'},
            {name: 'Buy', y: 10,  url: '/#pie3'},
            {name: 'Own', y: 10,  url: '/#pie4'}
        ]
    }]
});

您的事件对象有一些不匹配的括号，会导致 javascript 错误，我建议始终关注控制台中的 js 错误。

要实现悬停效果，您只需在系列或绘图选项中定义悬停状态选项

marker: {
    states: {
        hover: {
            fillColor: '#000'
        }
    }
}

处理悬停@jsFiddle

如果您不希望在所有点上都具有相同的悬停效果并且具有某些特定的逻辑，则可以像尝试的那样使用 mouseOver 和 mouseOut 事件。请注意，如果实施不好，可能会感觉迟钝。

events: {
    mouseOver: function () {
        this.update({
            color: '#000'
        });
    },
    mouseOut: function () {
        this.update({
            color: this.series.color
        });
    }
}

自定义悬停@jsFiddle

相关文章：