Changing series color in highcharts dynamically

问题:

I have been able to change the stroke color on a spline graph, but the points and the legend do not change color until after I hide and show the series by clicking it and then mousing over each of the points.

I have a fiddle here: http://jsfiddle.net/J56hm/2/

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });

    // the button handler
    $('#button').click(function() {
        chart.series[0].color = "#FF0000";
        chart.series[0].graph.attr({ stroke: '#FF0000' });

        $.each(chart.series[0].data, function(i, point) {
           point.graphic.attr({ fill: '#FF0000' });
         });
        chart.series[0].redraw();
        chart.redraw();
    });
});​

Any idea why this is happening or a way to work around this?

回答1:

it's simple, you can use this code

chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);

回答2:

The following thread on the highcharts forum has a solution:

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 with a fiddle http://jsfiddle.net/G5Pk7/ that illustrates it.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

$('#button').click(function() {
    var series = chart.series[0];
    series.color = "#FF00FF";
    series.graph.attr({ 
        stroke: '#FF00FF'
    });
    chart.legend.colorizeItem(series, series.visible);
    $.each(series.data, function(i, point) {
        point.graphic.attr({
            fill: '#FF00FF'
        });
    });
    series.redraw();
});

This is clearly a dirty solution, but seems to work.

回答3:

Did you even look at the console?

ReferenceError: series is not defined
http://fiddle.jshell.net/J56hm/1/show/
Line 39

Changing into to following solved the issue

$.each(chart.series[0].data, function(i, point) {
...
}

But now the opposite happens, when you hover over the points it goes blue again You are trying to directly manipulate the svg that is rendered by highcharts by setting color attributes. This isn't the correct way, as highchart may redraw the chart based on its rendering algorithm and all your changes may be lost.
After having said all that, I still don't know any supported method in highcharts to do this, will update the answer if I come up with something

@ jsFiddle