Ändern der Reihenfarbe in highcharts dynamisch

Question

Ich war in der Lage, die Strichfarbe auf einem Spline-Diagramm zu ändern, aber die Punkte und die Legende ändern die Farbe nicht, bis ich die Reihe verstecke und zeige, indem ich sie anklicke und dann über jedes von mause die Punkte.

Ich habe eine Geige hier: 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(); 
    }); 
});​ 

Jede Idee, warum dies oder eine Art und Weise geschieht, dies zu umgehen?

Answer 1

Die folgenden Threads auf dem highcharts Forum kommen hat eine Lösung:

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 mit einer Geige http://jsfiddle.net/G5Pk7/, die es veranschaulicht.

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(); 
}); 

Dies ist eindeutig eine schmutzige Lösung, scheint aber zu funktionieren.

Answer 2

Haben Sie sich die Konsole angesehen?

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

Beim Wechsel in den zu lösen nach Ausgabe

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

Aber jetzt das Gegenteil passiert, wenn Sie die Punkte schweben über es wieder blau Sie versuchen, direkt zu manipulieren die svg geht, die durch wiedergegeben wird Highcharts durch Setzen von Farbattributen. Dies ist nicht der richtige Weg, da Highchart das Diagramm basierend auf seinem Rendering-Algorithmus neu zeichnen kann und alle Ihre Änderungen verloren gehen können.
Danach alle gesagt haben, weiß ich immer noch nicht unterstützte Methode in highcharts, dies zu tun, wird die Antwort aktualisieren, wenn ich mit etwas

@ jsFiddle

Answer 3

es einfach ist, können Sie diesen Code verwenden

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