web-dev-qa-db-fra.com

Modification dynamique de la couleur des séries dans les graphiques

J'ai pu changer la couleur du trait sur un graphique spline, mais les points et la légende ne changent de couleur qu'après avoir masqué et montré 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();
    });
});​

Une idée de pourquoi cela se produit ou une façon de contourner cela?

javascripthighcharts
14
Soliah

Le fil suivant sur le forum highcharts a une solution:

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

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 sale solution, mais semble fonctionner.

8
Soliah

c'est simple, vous pouvez utiliser ce code

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

Avez-vous même regardé la console?

ReferenceError: la série n'est pas définie
http://fiddle.jshell.net/J56hm/1/show/
Ligne 39

Passer à la suite a résolu le problème

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

Mais maintenant, l'inverse se produit, lorsque vous survolez les points, ils redeviennent bleus. Vous essayez de manipuler directement le svg rendu par les graphiques en définissant des attributs de couleur. Ce n'est pas la bonne façon, car le graphique peut redessiner le graphique en fonction de son algorithme de rendu et toutes vos modifications peuvent être perdues.
Après avoir dit tout cela, je ne connais toujours aucune méthode prise en charge dans les graphiques pour le faire, mettra à jour la réponse si je trouve quelque chose

@ jsFiddle

5
Jugal Thakkar