Changement de couleur de série dans highcharts dynamiquement

J'ai été en mesure de modifier la couleur du contour sur une spline graphique, mais les points et la légende ne change pas de couleur jusqu'à ce que après que j'ai cacher et voir la série en cliquant dessus, puis en passant la souris sur chacun des points.

J'ai un violon ici: 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();
    });
});​

Aucune idée pourquoi ce qui se passe ou un moyen de contourner cela?

OriginalL'auteur Soliah | 2012-09-14

  1. 35

    c'est simple, vous pouvez utiliser ce code

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

    OriginalL'auteur Duc Anh Nguyen

  2. 7

    Le fil de discussion suivant sur la highcharts forum a une solution:

    http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 avec un violon http://jsfiddle.net/G5Pk7/ qui l'illustre.

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

    C'est clairement une solution sale, mais semble fonctionner.

    pourquoi considérez-vous cela une "sale" solution? Cela a très bien fonctionné pour moi!

    OriginalL'auteur Soliah

  3. 5

    Ne vous regarde même la console?

    ReferenceError: la série n'est pas défini

    http://fiddle.jshell.net/J56hm/1/show/

    Ligne 39

    Se changer à la suite résolu le problème

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

    Mais maintenant l'inverse qui se produit, lorsque vous passez la souris sur les points qu'il va de nouveau bleu
    Vous essayez de manipuler directement le svg qui est rendu par les highcharts en définissant des attributs de couleur. Ce n'est pas la bonne façon, comme highchart peut redessiner le graphique en fonction de son algorithme de rendu et de toutes vos modifications peuvent être perdues.

    Après avoir dit tout cela, je ne sais toujours pas toute méthode de prise en charge dans highcharts pour ce faire, elle mettra à jour la réponse si je viens avec quelque chose de

    @ jsFiddle

    Mon erreur avec le message d'erreur. J'étais dans un rush quand j'ai posté la question et ne regarde pas la console. Ma question tient toujours, même si j'ai peut-être trouvé un travail sale, même si elle implique de modifier le sous-jacent SVG.

    OriginalL'auteur Jugal Thakkar