Chart.js v2 - Gitterlinien ausblenden

149

Ich verwende Chart.js v2, um ein einfaches Liniendiagramm zu zeichnen. Alles sieht gut aus, außer es gibt Gitterlinien, die ich nicht will:

Die Dokumentation zum Liniendiagramm finden Sie hier: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , aber ich kann nichts zum Ausblenden dieser "Gitterlinien" finden.

Wie kann ich die Gitterlinien entfernen?

javascript chart.js2

— iSS
quelle

341

Ich habe eine Lösung gefunden, mit der die Gitterlinien in einem Liniendiagramm ausgeblendet werden können.

Stellen Sie die gridLinesFarbe so ein, dass sie mit der Hintergrundfarbe des Divs übereinstimmt.

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

— Irvine
quelle

2

Dadurch wird die GridLines-Farbe tatsächlich auf 0 opacitySchwarz (eine transparente Farbe) festgelegt. Dies sollte also unabhängig von der Hintergrundfarbe des Divs funktionieren.

— XCS

40

Oder verwenden Sie display: false anstelle von "color"

— Irvine,

4

Vielen Dank! Wenn nur die Dokumentation zu diesem Thema etwas klarer wäre. :)

— iSS

Ich wollte die Skala beibehalten, aber die Gitterlinien auf der Rückseite des Diagramms verlieren, sodass diese Antwort für mich nicht funktionierte.

— adg

1

Während diese erste Antwort zum gewünschten Bild führt, ist es ein bisschen ein Hack. Die zweite Lösung, bei der die Anzeigeeigenschaft gridLines tatsächlich auf false gesetzt wird, scheint korrekter zu sein.

— Tot Zam

57

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

— user2138568
quelle

5

Diese Antwort erlaubte mir, den Maßstab beizubehalten, aber nicht die Gitterlinien auf dem Diagramm zu zeichnen.

— adg

19

Wenn Sie möchten, dass sie standardmäßig nicht mehr angezeigt werden, können Sie Folgendes festlegen:

Chart.defaults.scale.gridLines.display = false;

— David
quelle

12

Wenn Sie Gitterlinien ausblenden, aber yAxes anzeigen möchten, können Sie Folgendes festlegen:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

— Kathy
quelle

8

OK, egal .. Ich habe den Trick gefunden:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

— Hygorbudny
quelle

4

Mit dem folgenden Code werden nur Gitterlinien aus dem Diagrammbereich entfernt, nicht die in den Beschriftungen der x- und y-Achse

Chart.defaults.scale.gridLines.drawOnChartArea = false;

— Ahmed Adewale
quelle