Question

在集成hoverstates或mouseOver函数之后，图表只会中断.. 有关如何成功实现颜色悬停状态的任何建议？ （是否可以为每个颜色悬停状态设置不同的颜色悬停状态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'}
        ]
    }]
});

Answer 1

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

要完成悬停效果，您只需在系列中定义hover state options或plotOptions

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

Handling hover @ jsFiddle

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

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

Custom hover @ jsFiddle

highcharts.js添加mouseOver函数或悬停状态（实现破坏图表？）

1 个答案: