g.raphael graphique à barres de couleur différente pour chaque barre?

Question

Est-il possible de donner à chaque barre sa propre couleur dans un diagramme à barres g.Raphaël?

Je suis entièrement capable de changer la couleur pour la série. Mais ce que je voudrais, ce sont les premiers résultats de chaque série à avoir des couleurs similaires, le deuxième de chaque série et ainsi de suite.

Je ne trouve pas beaucoup de documentation à ce sujet, et j'ai essayé quelques expériences sans tête, mais aucune n'a l'effet que je veux.

Answer 1

Vous pouvez modifier la propriété attr de chaque chemin dans svg

r.barchart(x,y,width,length,[data]); 

var colors =["#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#552288","#228844","#a38643","#296583"]; 

// use jquery for easier way 
$("#holder svg path").each(function(index){ 
    $(this).attr("fill",colors[index]); 
}); 

Answer 2

Vous pouvez définir des options comme ceci:

var custom_colors =["#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff"]; 

r.barchart(x,y,width,height,[data], { colors: custom_colors }); 

Autres options

var options : { 
    legend : [], 
    stacked: false, //Use this to stack your bars instead of displaying them side by side 
    type: "soft", //round, sharp, soft, square, 
    colors : custom_colors 
} 

r.barchart(x,y,width,height,[data], options); 

Vous pouvez définir vos couleurs dans une fonction. Voici une fonction que vous pouvez utiliser:

function _getColors() { 
    var byndColors = ["#ffc000","#1d1d1d","#e81c6e","#7c7c7c","#00aff2","#aaaaaa","#611bc9"]; 

    //some random colors 
    var randColors = ["#77efac","#364f8a","#60cb94","#cf263b","#2471bb","#7fc398","#d2c66a","#2109dc","#66ad29","#9a9754","#640cdf","#257683","#d51e05","#4bb36e","#e7408a","#1ef173","#1756bc","#cff215","#15c2fb","#f010ab","#844a0","#c34021","#3e4cf2","#8e2864","#a28f5c","#a9d528","#7b1e43","#a5401c","#829813","#691ccd"] 

    //combine them 
    return byndColors.concat(randColors); 

} 

et l'utiliser comme:

r.barchart(x,y,width,height,[data], { colors: _getColors() }); 

Answer 3

Vous devez spécifier certaines couleurs et assurez-vous que les données sont un tableau de tableaux où l'indice de l'intérieur les tableaux sont tous à 0 pour toutes les valeurs, mais cet indice:

data = [[55, 0, 0], [0, 20, 0], [0, 0, 40]]; 

r.barchart(10, 10, 100, 220, data, { 
    colors: [ 
     // Some colours 
     "000-#d00-#900", 
     "000-#f64-#c31", 
     "000-#fc0-#c90", 
     "000-#3a3-#070", 
     "000-#2bc-#089", 
     "000-#00d-#00a", 
     "000-#808-#404", 
     "000-#444-#000" 
    ] 
}); 

ici r est l'instance Raphaël. Voir http://g.raphaeljs.com/barchart.html