Comment définir la couleur de la famille de graphique à secteurs chart.js
Je suis en train de dessiner un graphique à l'aide de Chart.js. Mes valeurs sont à venir à partir d'une base de données donc je ne sais pas combien de valeurs dans la base de données. Ici, je veux définir une couleur unique à chaque valeur. Ci-dessous mon exemple.
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);
Actuellement dans l'exemple ci-dessus, j'ai mis codé en dur valeurs mais dans mon exemple de données (Json) est à venir à partir de DB.
OriginalL'auteur pankaj | 2015-03-03
Vous devez vous connecter pour publier un commentaire.
Vous pourriez boucle-vous pensé de votre pieData pile et définir des valeurs aléatoires pour la valeur de la couleur.
Vous pouvez définir celui-ci avec une valeur comme "rgb(230,0,0)" et de générer de la rouge vert bleu les valeurs de nombre entier au hasard.
Quelque chose comme ceci :
Voir un exemple jsfiddle ici, avec des valeurs aléatoires et des couleurs aléatoires. (Exécuter plusieurs fois pour avoir une idée de la façon dont elle s'affiche avec les différents jeux de données.)
Ou autre chose, vous pouvez définir un tableau de couleurs prédéfinies et l'utiliser. Considérer qu'un graphique à secteurs avec plus de 50 articles n'est pas très lisible. Donc, par défaut, une liste de 50 est peut-être juste ok.
Salut Denise. J'ai été appeler chart.js à partir d'un cdn qui n'existe plus. C'est corrigé maintenant. Lui donner un essai, j'ai mis à jour le lien.
Cool merci beaucoup!
OriginalL'auteur rtome
J'ai créé un simple famille de couleurs avec 15 couleurs différentes.
Ils ne sont pas choisis au hasard. Au lieu de cela, les couleurs ont été choisies pour maximiser la différence entre ce qui est proche de couleurs.
Vous pouvez toujours créer le graphique avec moins de 15 points de données, et pas de message d'alerte sera générée.
Voici le code:
C'est le html:
Si vous voulez jouer avec elle, voici le code jsfiddle.
J'espère que cela aidera 🙂
OriginalL'auteur Luca Mastrostefano
Tout d'abord, il y a beaucoup de gens de couleur aveugles. Voici un bel article sur les tableaux et daltonisme:
Trouver la bonne Couleur de Palettes pour des Visualisations de Données
Il utilise Chart.js 2.4.0
Je suis de calculer les différentes couleurs d'un dégradé comme ceci:
Ce qui donne un joli look cohérent. J'ai emprunté les palettes à partir du lien ci-dessus. Je ne l'ai testé avec un beignet, un bar et des courbes, mais il devrait être assez facile d'ajouter d'autres types. Vous pouvez aussi facilement créer vos propres dégradés.
Vous pouvez trouver un jsfiddle ici.
HTML:
Javascript:
Cela donnerait quelque chose comme ceci:
OriginalL'auteur Conny Olsson