Highcharts: changing color on hover ranking chart

2020-02-13 04:03发布

问题:

Right now I'm working on a ranking chart since I'm trying to highlight one serie, all others must be still on the chart but dimmed.

So I'm trying to change color on mouse over for the dimmed series, this helped me a lot Highcharts - change series color on MouseOver but I don't know how to handle the markers color because the function in mouseOver this.graph.attr('stroke', '#0000FF'); changes only the line color. Looking for "hover" in highcharts docs found this

    marker: {
        fillColor: '#C0C0C0',
        states: {
            hover: {
                fillColor: '#0000FF'
            }
        }
    }

My question is if there is a way to change the hole series color of the hovered series in the mouseover function, right now is working here http://jsfiddle.net/diegomanule/UyF9u/

Thanks in advance,

回答1:

You shouldn't directly manipulate the SVG if you don't have to (and in this case you don't have to). Borrowing from this documentation examaple:

   events: {
        mouseOver: function () {
            this.update({
                color: '#0000FF'
            });                
        },
        mouseOut: function () {
            this.update({
                color: '#C0C0C0'
            }); 
        }
    },

Updated fiddle here.