it-swarm.com.de

Die automatische Farbzuweisung in chart.js 2.x funktioniert nicht mehr und wurde in Version 1.x verwendet

Mit Chart.js 1.x könnte ich ein Kreisdiagramm erstellen und die Farben automatisch zuweisen lassen:

<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>

wenn ich dasselbe mit v 2.x mache

<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>

die gesamte Torte wird in Grau angezeigt, wenn Sie die Farben nicht manuell festlegen. fehlt mir etwas Die einzige verwandte Frage, die ich gefunden habe, ist diese: Zufällige Füllfarben in Chart.js Wie oben erklärt, funktionierte es perfekt auf 1.x, daher erscheint es mir seltsam, dass es nicht mehr funktioniert.

19
Eugenio

Ich glaube, dass die Erstellung von Farbschemata eine eigene Wissenschaft ist. Es macht für mich Sinn, dass so etwas in Chart.js weggelassen wurde, da es kritischere Ziele gibt, die verfolgt werden müssen. Alle Farben, die in Diagrammbeispielen in docs verwendet werden, sind explizit definiert. Und diese zwei Monate alte Ausgabe zeigt eine kategorische Antwort eines Chart.js-Mitglieds, dass in Chart.js 2 keine Standardfarben verfügbar sind. Sie haben also drei Möglichkeiten. Die erste Wahl ist, einige Farben selbst zu machen. Ich schätze, Sie hätten die Frage nicht gestellt, wenn Sie sich für so etwas interessiert hätten (ich weiß, dass die Ergebnisse schrecklich wären, wenn [~ # ~] i [~ # ~] hat so etwas gemacht). Die zweite Möglichkeit besteht darin, online nach Farbschemata und Farbschemageneratoren zu suchen und einige Farbschemata auszuwählen, die Ihnen gefallen. Die dritte und interessante Möglichkeit besteht darin, nach einer JavaScript-Bibliothek zu suchen, die nach Belieben Farbschemata erzeugen kann. Es gibt ein paar alternative Möglichkeiten. Ein Nettes, das unter sehr freizügigen Lizenzbedingungen erhältlich ist, ist der Farbpalettengenerator . Sie können es in Aktion entlang Chart.js 2 sehen hier . Das Beispiel ist auch unten verfügbar:

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>
<script src="https://raw.githubusercontent.com/google/palette.js/master/palette.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Wie man die Bibliothek benutzt, wird beschrieben hier . Kurz gesagt, Sie können eine 10-Farben-Palette aus einem bestimmten Farbschema wie folgt erstellen:

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

Das Ergebnis ist ein Array von Hex-Zeichenfolgen (z. B. "eee8d5"). Um es zu verwenden, wo Chart.js Farben erwartet, können Sie map verwenden, um jedem String ein "#" voranzustellen, wie im obigen Beispiel.

57
xnakos

Ich würde eigentlich ChartsJS-Plugin-ColorSchemes empfehlen. Durch einfaches Importieren nach Chartjs können Sie automatisch färben. Wenn Sie Optionen hinzufügen, können Sie beispielsweise benutzerdefinierte Paletten erstellen.

...

  options: {

    plugins: {

      colorschemes: {

        scheme: 'tableau.Tableau20'

      }

    }

  }
1
SARose