Cambiando el color de la serie en diagramas altos dinámicamente

Question

He podido cambiar el color del trazo en un gráfico spline, pero los puntos y la leyenda no cambian de color hasta después de que oculto y muestro la serie haciendo clic en ella y luego pasando sobre cada uno de ellos los puntos.

Tengo un violín aquí: 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(); 
    }); 
});​ 

Cualquier idea de por qué esto está ocurriendo o una manera de evitar esto?

Answer 1

El siguiente hilo en el foro tiene Highcharts una solución:

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 con un violín http://jsfiddle.net/G5Pk7/ que lo ilustra.

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

Esto es claramente una solución sucia, pero parece que funciona.

Answer 2

¿Incluso miraste la consola?

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

Cambio en al siguiente solucionado el problema

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

Pero ahora sucede lo contrario, cuando se pasa sobre los puntos que se vuelve azul nuevo Usted está tratando de manipular directamente el SVG que se representa por Highcharts estableciendo atributos de color. Esta no es la forma correcta, ya que Highchart puede volver a dibujar el gráfico en función de su algoritmo de representación y todos sus cambios pueden perderse.
Después de haber dicho todo esto, todavía no saben cualquier método admitido en Highcharts de hacer esto, se actualizará la respuesta si se me ocurre algo

@ jsFiddle

Answer 3

es simple, puede utilizar este código

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