Assignation automatique des couleurs dans le graphique.js 2.x ne fonctionne plus, il travaillait en v. 1.x
À L'Aide Du Graphique.js 1.x j'ai pu créer un graphique en secteurs et obtenir les couleurs automatiquement attribué:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>
si je fais la même chose avec v 2.x
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Conservative", "Democratic"],
datasets: [{
data: [5, 15],
}]
}
});
</script>
</body>
la tarte entière est affichée en gris sauf si je spécifie les couleurs manuellement; est-ce que je manque quelque chose? La seule question connexe que j'ai trouvé est celui-ci: remplir les couleurs au hasard dans le graphique.js toutefois, comme expliqué ci-dessus, il a parfaitement fonctionné sur 1.x donc il me semble étrange que cela ne fonctionne plus.
1 réponses
je crois que la création de schémas de couleurs est une science à part entière. Il est logique pour moi que quelque chose comme ça ait été laissé de côté.js, puisqu'il y a des objectifs plus critiques à poursuivre. Toutes les couleurs utilisées dans les exemples de graphiques dans le docs sont définis explicitement. Et ce deux-mois-vieux problème dispose d'une réponse catégorique à partir d'un Graphique.membre js que les couleurs par défaut ne sont pas disponibles dans le graphique.js 2. Donc, vous avez trois choix. Le premier choix est de faire de la couleur vous-même. Je suppose que vous n'auriez pas posé la question, si vous aviez été dans quelque chose comme ça (je sais que les résultats serait horrible, si I est-ce que quelque chose comme ça). Le deuxième choix est de chercher des schémas de couleur et des générateurs de schéma de couleur en ligne et de choisir quelques schémas de couleur qui vous plaisent. Le troisième choix intéressant est de chercher une bibliothèque JavaScript qui peut produire des schémas de couleurs à volonté. Il ya un couple de solutions de remplacement. Une belle, qui est disponible sous licence très permissive, est le Générateur De Palette De Couleurs. Vous pouvez le voir en action le long du graphique.js 2 ici. L'échantillon est également disponible ci-dessous:
var ctx = document.getElementById("myChart");
var myData = [12, 19, 3, 5, 2, 3];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"],
datasets: [{
label: '# of Votes',
data: myData,
backgroundColor: palette('tol', myData.length).map(function(hex) {
return '#' + hex;
})
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<!-- This is a copy of palette.js -->
<script src="https://codepen.io/anon/pen/aWapBE.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>utilisation de la bibliothèque est décrite ici. En bref, vous pouvez créer une palette de 10 couleurs à partir d'un schéma de couleurs spécifique en utilisant ce qui suit:
var seq = palette('tol-sq', 10);
le résultat est un tableau de chaînes hex (par exemple "eee8d5"). Pour l'utiliser où de Graphique.js attend couleurs, vous pouvez utiliser map pour ajouter " # " à chaque chaîne, comme dans l'exemple ci-dessus.