iSS
Ich verwende Chart.js v2, um ein einfaches Liniendiagramm zu zeichnen. Alles sieht gut aus, außer dass es Gitterlinien gibt, die ich nicht möchte:
Die Dokumentation für Liniendiagramm ist hier: https://nnnick.github.io/Chart.js/docs-v2/#line-chartaber ich kann nichts über das Ausblenden dieser “Gitterlinien” finden.
Wie kann ich die Gitterlinien entfernen?
Irvine
Ich habe eine Lösung gefunden, die zum Ausblenden der Gitterlinien in einem Liniendiagramm funktioniert.
Stellen Sie die ein gridLines Farbe muss dieselbe sein wie die Hintergrundfarbe des div.
var options = {
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
oder verwenden
var options = {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
Dies setzt eigentlich die Farbe von gridLines auf a 0 opacity schwarz (eine transparente Farbe). Dies sollte also unabhängig von der Hintergrundfarbe des divs funktionieren.
– XCS
18. April 2016 um 11:24 Uhr
Oder verwenden Sie display:false anstelle von “color”
– Irvine
18. April 2016 um 11:25 Uhr
Vielen Dank! Wenn nur die Dokumentation zu diesem Thema etwas klarer wäre. 🙂
– iSS
18. April 2016 um 12:25 Uhr
Während diese erste Antwort zum gewünschten Bild führen kann, ist es ein bisschen wie ein Hack. Die zweite Lösung, die die Anzeigeeigenschaft gridLines tatsächlich auf false setzt, scheint korrekter zu sein.
– Tot Zam
9. November 2018 um 8:06 Uhr
Dies entfernt auch Linien der x-Achse (einzelne Linie) und der y-Achse (einzelne Linie). Aber ich wollte nur Linien im Diagramm entfernen. drawOnChartArea: false tut also das Richtige.
– Rajeshwar
7. Juni 2020 um 18:53 Uhr
Ishan Varshney
Verwenden Sie ab Version 3.x diese Syntax. Siehe chart.js-Migrationsanleitung: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
Dies sollte höher gestimmt werden. Ich habe mich gefragt, warum keine der obigen Antworten funktioniert hat!
– Spieleinheit
23. Juli 2021 um 22:58 Uhr
Tatsächlich funktionierten die akzeptierten Antworten im August 2021 nicht mehr, aber diese funktionierte.
– Tilly
3. August 2021 um 12:20 Uhr
Dies sollte die akzeptierte Antwort sein
– Ali Bayat Mokhtari
13. Februar um 12:02 Uhr
Ich habe mich gefragt, warum andere Lösungen aufgrund der Version den Fehler „Ungültige Skalierungskonfiguration für Skalierung: xAxes“ ausgeben. Die Optionen von Chart.js 3+ unterscheiden sich von denen der älteren Version.
– Ashiq Dey
28. März um 14:50 Uhr
Ja, andere Lösungen funktionieren nicht mehr, aber dies funktioniert, sollte als Antwort akzeptiert werden
– Code-Affe
15. April um 17:23 Uhr
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
Diese Antwort ermöglichte es mir, die Skala beizubehalten, aber die Gitternetzlinien nicht auf dem Diagramm zu zeichnen.
– Erw
3. September 2018 um 7:40 Uhr
Ich denke, das ist eher die bessere Antwort.
– D Dimitrow
27. November 2020 um 9:07 Uhr
Gute Antwort. Das ist aber sauberer: Chart.defaults.scale.gridLines.drawOnChartArea = false;
– Kalimah
5. Dezember 2020 um 13:20 Uhr
@Kalimah: Der obige (in Optionen) Code hat bei mir funktioniert. Die „sauberere“ Lösung funktioniert bei mir mit dem Plugin „chartjs-chart-error-bars“ nicht
– Garavani
19. Dezember 2021 um 10:22 Uhr
David
Wenn Sie möchten, dass sie standardmäßig verschwinden, können Sie Folgendes festlegen:
Chart.defaults.scale.gridLines.display = false;
Kathy
Wenn Sie Gitternetzlinien ausblenden, aber y-Achsen anzeigen möchten, können Sie Folgendes einstellen:
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
hygorbudny
OK, egal.. Ich habe den Trick gefunden:
scales: {
yAxes: [
{
gridLines: {
lineWidth: 0
}
}
]
}
Ahmed Adwale
Der folgende Code entfernt Gitternetzlinien nur aus dem Diagrammbereich, nicht aus den x- und y-Achsenbeschriftungen
Chart.defaults.scale.gridLines.drawOnChartArea = false;
Dies ist die richtige Antwort, da dies nichts außerhalb des Draw-Bereichs ändert, danke Ahmed
– Ranny
3. September 2020 um 9:44 Uhr
