web-dev-qa-db-fra.com

L'affectation automatique des couleurs dans chart.js 2.x ne fonctionne plus, fonctionnait auparavant dans v. 1.x

En utilisant Chart.js 1.x, je pouvais créer un graphique à secteurs et obtenir les couleurs automatiquement attribuées:

<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ée est celle-ci: Couleurs de remplissage aléatoires dans Chart.js cependant, comme expliqué ci-dessus, cela a parfaitement fonctionné sous 1.x, donc il me semble étrange que cela ne fonctionne plus.

javascriptchartschart.js
19
Eugenio

Je crois que la création de palettes de couleurs est une science à part entière. Il est logique pour moi que quelque chose comme cela ait été laissé de côté de Chart.js, car il y a des objectifs plus critiques à poursuivre. Toutes les couleurs utilisées dans les exemples de graphique dans docs sont définies explicitement. Et ce numéro vieux de deux mois présente une réponse catégorique d'un membre de Chart.js selon laquelle les couleurs par défaut ne sont pas disponibles dans Chart.js 2. Vous avez donc trois choix. Le premier choix est de faire des couleurs vous-même. Je suppose que vous n’auriez pas posé la question si vous aviez eu affaire à quelque chose comme ça (je sais que les résultats seraient horribles si I faisait quelque chose comme ça). Le second choix est de rechercher en ligne des jeux de couleurs et des générateurs de couleurs et de choisir des couleurs qui vous plaisent. Le troisième et intéressant choix est de rechercher une bibliothèque JavaScript capable de produire des schémas de couleurs à volonté. Il y a plusieurs choix alternatifs. Un bon, qui est disponible sous licence très permissive, est le Color Palette Generator . Vous pouvez le voir en action le long de Chart.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>

Comment utiliser la bibliothèque est décrite ici . En bref, vous pouvez créer une palette de 10 couleurs à partir d’un jeu de couleurs spécifique en utilisant les éléments suivants:

var seq = palette('tol-sq', 10);

Le résultat est un tableau de chaînes hexadécimales (par exemple, "eee8d5"). Afin de l'utiliser lorsque Chart.js attend des couleurs, vous pouvez utiliser map pour ajouter le caractère "#" devant chaque chaîne, comme dans l'exemple ci-dessus.

48
xnakos

Je recommanderais réellement ChartsJS-Plugin-ColorSchemes . Il vous suffira simplement de l'importer après chartjs d'avoir une coloration automatique, mais l'ajout d'options vous permettra par exemple de créer des palettes personnalisées.

...

  options: {

    plugins: {

      colorschemes: {

        scheme: 'tableau.Tableau20'

      }

    }

  }
1
SARose