Automatische Farbzuweisung in chart.js 2.x funktioniert nicht mehr, wurde in Version 1.x verwendet

Mit Chart.js 1.x konnte ich ein Kreisdiagramm erstellen und die Farben automatisch zuweisen:Automatische Farbzuweisung in chart.js 2.x funktioniert nicht mehr, wurde in Version 1.x verwendet

<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 das gleiche mit 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>

die ganze Torte in Grau angezeigt wird, wenn ich die Farben manuell angeben; Fehle ich etwas? Die einzige relevante Frage, die ich gefunden habe, ist diese: Random fill colors in Chart.js jedoch, wie oben erläutert, es funktionierte perfekt auf 1.x, so dass es mir seltsam scheint es nicht mehr funktioniert.

Quelle

2016-10-05 Eugenio

Ich glaube, dass die Schaffung von Farbschemata eine ganze Wissenschaft für sich ist. Es macht für mich Sinn, dass so etwas aus Chart.js heraus gelassen wurde, da es mehr kritische Ziele zu verfolgen gibt. Alle Farben, die in den Diagrammbeispielen in docs verwendet werden, sind explizit definiert. Und this two-month-old issue verfügt über eine kategorische Antwort von einem Chart.js Mitglied, dass Standardfarben in Chart.js 2. Also nicht verfügbar sind, haben Sie drei Möglichkeiten. Die erste Wahl ist, einige Farben selbst zu machen. Ich glaube, Sie würden nicht die Frage gestellt haben, waren Sie so in etwas gewesen (ich weiß, dass die Ergebnisse wären schrecklich, wenn ich so etwas tun). Die zweite Wahl besteht darin, online nach Farbschemata und Farbschemageneratoren zu suchen und einige Farbschemata auszuwählen, die Ihnen gefallen. Die dritte und interessante Wahl besteht darin, nach einer JavaScript-Bibliothek zu suchen, die nach Belieben Farbschemata erzeugen kann. Es gibt ein paar alternative Möglichkeiten. Eine nette, die unter sehr permissiver Lizenzierung verfügbar ist, ist die Colour Palette Generator. Sie können es in Aktion entlang Chart.js 2 here sehen. Die Probe ist auch unten zur Verfügung:

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>

Wie die Bibliothek zu verwenden ist here beschrieben.

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

Das Ergebnis ist ein Array von Hex-Strings (beispielsweise „eee8d5“): Kurz gesagt, können Sie eine 10-Farbpalette von einem bestimmten Farbschema mit dem folgenden erstellen. Um es dort zu verwenden, wo Chart.js Farben erwartet, können Sie map verwenden, um "#" wie im obigen Beispiel jeder Zeichenfolge voranzukommen.

Quelle

2016-10-05 22:29:31 xnakos

Das Entfernen der sehr einfachen Standard-Palette klingt für mich unlogisch (ich sah den zugehörigen Code in V1 und es war sehr einfach), aber das war die Wahl und Ihre Lösung funktioniert sehr gut, danke! – Eugenio

@Eugenio Beim Wechsel von einer Version zur anderen kann die Funktionalität verschwinden. Aber die Charts und Plugins funktionieren wirklich gut, so dass eine externe Palette nicht sehr störend ist. :) – xnakos

Automatische Farbzuweisung in chart.js 2.x funktioniert nicht mehr, wurde in Version 1.x verwendet

Antwort

Verwandte Themen