Ich verwende ein Messdiagramm basierend auf ( Chartjs-tsgauge ). Ich möchte Hintergrundfarben für Diagramme unabhängig von den Messgrenzen festlegen. Das Problem, wie Charts.JS den Hintergrund rendert, weil das von mir verwendete Plugin keinen Code für Hintergründe enthält. Zum Beispiel habe ich ein Messgerät mit Grenzen [0, 20, 40, 60, 80, 100]
. Ich möchte auf [0-30]
Grün, [30-70]
Gelb und [70-100]
Rot setzen. Aktueller Code: CodePEN
Hier sind meine aktuellen Optionen.
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
type: "tsgauge",
data: {
datasets: [{
backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
borderWidth: 0,
gaugeData: {
value: 7777,
valueColor: "#ff7143"
},
gaugeLimits: [0, 3000, 7000, 10000]
}]
},
options: {
events: [],
showMarkers: true
}
});
Und hier ist mein Ansatz zum Einstellen der Hintergrundfarben.
new Chart(ctx, {
type: "tsgauge",
data: {
datasets: [{
backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
borderWidth: 0,
gaugeData: {
value: 50,
valueColor: "#ff7143"
},
gaugeLimits: [0, 20, 40, 60, 80, 100],
gaugeColors: [{
min: 0,
max: 30,
color: ""
}, {
min: 30,
max: 70,
color: ""
},{
min:70,
max:100,
color: ""
}]
}]
},
options: {
events: [],
showMarkers: true
}
});
Derzeit Chart.JS
passt Farben 0
an i
mit Grenzen 0
zu i
. Ich dachte auch, ich würde ein anderes Dummy-Diagramm mit den gewünschten Farben zeichnen und es über das reale Diagramm legen, aber es scheint eine zweifelhafte Art, dies zu tun.
quelle
Antworten:
Vorherige Lösung
Sie können Ihren Datensatz ein wenig ändern, um dies zu erreichen:
Da Sie
gagueLimits
in einen Bereich von20
derzeit aufgeteilt sind, können Sie nicht auf das Limit von 30 zugreifen.Also, was ich hier getan habe, ist
guageLimits
auf einen geteilten Bereich von ausgearbeitet10
und ist jetzt30
zugänglich, so ist es auch70
.Nun zu den Farben, für die jeweils
guageLimits
eine Farbe imbackgroundColor
Array erforderlich ist. Ich stelle sie entsprechend ein und überprüfe das obige Array. Da keine der entsprechenden Farben leer sein kann, müssen Sie möglicherweise dieselbe Farbe verwenden, bis Sie den nächsten Farbbereich erreichen.Aktualisierte Lösung
Ihre Anforderungen wurden jetzt geklärt:
Wenn Sie technisch gesehen einen Farbbereich auf einen bestimmten Punkt festlegen möchten, müssen Sie diesen Wert im
gaugeLimits
Array haben, damit Ihr reduziertesgaugeLimits
Array jetzt folgendermaßen aussieht:Nein, Sie können die Farben entsprechend einstellen, da Sie die im Array angegebenen Punkte haben. Daher ist das
backgroundColor
Array:Nun der letzte Trick
Sie müssen immer noch die 30 und 70 aus der Skala ausblenden. Ich habe versucht, die
showMarkers
in Ihrem Code umzuschalten. Es sieht so aus, als ob sie die sichtbare Zahlenskala entweder aktiviert oder deaktiviert. Ich habe versucht, ein Array von Zeichenfolgen bereitzustellen, aber es akzeptiert nurboolean
Chartjs-tsgauge Bietet nicht viel Dokumentation über verfügbare Optionen, also habe ich mich in den Code geschlichen und gefunden
markerFormatFn
Es wird eine Funktion als Parameter verwendet, und Sie können eine Funktion bereitstellen, die angibt, was mit jedem Ihrer Markierungselemente zu tun ist.
Daher kam mir die Idee, eine Funktion bereitzustellen, mit der nur die durch 20 teilbaren Zahlen ohne Rest angezeigt werden können. Andernfalls wird eine leere Zeichenfolge zurückgegeben. Hier ist sie:
Überprüfen Sie das Snippet:
quelle