Comment puis-je définir des couleurs différentes pour chaque barre dans angular-chart.js?
J'ai regardé Comment changer les couleurs pour Angular-Chart.jsmais elle se rapporte à des couleurs pour un ensemble (ensemble de données), pas une barre spécifique.
Ce que je suis à la recherche d'un moyen pour appliquer Couleur différente pour chaque barre dans un graphique à barres; ChartJS Angulaire.
Donc, j'ai un graphique à barres:
<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas>
Avec le suivant angulaire de code (dans un contrôleur de cours)
$scope.chartParams = {
listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
votes: [[5,10,6,7,2]],
series: ["Nice Places"],
colours: [{fillColor:getRandomColour()}],
options: {barShowStroke : false}
};
où getRandomColour()
serait de retour d'une couleur aléatoire.
Droit maintenant, le colours
champ s'applique cette couleur pour toutes les barres:
quand je veux en fait une couleur différente pour chaque barre:
source d'informationauteur Huey | 2015-05-02
Vous devez vous connecter pour publier un commentaire.
Plunker Démo
La meilleure chose à faire est de modifier le chart.js la source du fichier à accepter un tableau de couleurs pour fillColor plutôt que d'une seule chaîne de couleur.
Si vous pouviez obtenir l'une des autres solutions proposées de travail, je pense qu'il finirait par avoir à faire à un très angulaire.
Certaines personnes n'aiment pas modifier la source, mais pour la simplicité et de la facilité qu'on a à faire, et il permet d'atteindre le résultat souhaité, et il n'est pas moins "angulaire", la solution de...appelons ça une amélioration de chart.js.
Noter que j'ai seulement modifié la "barre" graphique à accepter un tableau de couleurs, car il semble chart.js références the séparément dans chaque type de graphique. Donc, vous devriez être en mesure d'effectuer cette modification de travailler pour l'une des diagrammes types.
L'endroit où vous devez modifier:
Ce bloc de code peut être trouvé dans le Tableau.type.étendre la fonction de la barre graphique. Il suffit de regarder pour cela:
et regardez plus loin à l'intérieur de cette fonction de l'endroit où il pousse la fillColor à la datasetObject.des bars.
Maintenant, il suffit de configurer votre diagramme comme avant, à l'exception de nourrir un tableau pour fillColor:
À l'aide de la dernière version de angular-chart.jsvoici un exemple qui change les couleurs en fonction d'une condition, sans modification de la bibliothèque elle-même. Au lieu de cela, il utilise le
chart-dataset-override
fonctionnalité.L'astuce consiste à utiliser une série avec un seul jeu de données.
HTML
JavaScript
Ajoutez le code suivant au contrôleur:
Sortie
Produit:
Liens Connexes
L'un des plus gros problèmes avec le Diagramme de bibliothèques est que, tôt ou tard, vous frappez un mur, qui ne peut être violé par le piratage ou l'extension de la bibliothèque. Sachant que vous frappez le mur et ce qui pourrait-être la réponse à cette question.
Même si vous pouvez créer un personnalisé chart.js graphique vous pouvez également résoudre ce problème avec d3.js. J'ai pris un de la base angulaire d3.js barchart exemples et ajouté le comportement que vous souhaitez:
http://plnkr.co/edit/9RCYAPCEj9iRsxkkYPaV?p=preview
La personnalisation d'un graphique en quelque sorte, comme le changement de fond, le contour ou quoi que ce soit d'autre est à portée de main.
C'est cause toujours, même si beaucoup plus de code, mais si vous voulez personnaliser au-delà de la bibliothèque de support, il est toujours beaucoup plus de code.