Chart.js v2 - nascondere le linee della griglia

149

Sto usando Chart.js v2 per disegnare un semplice grafico a linee. Tutto sembra a posto, tranne che ci sono linee della griglia che non voglio:

La documentazione per il grafico a linee è qui: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , ma non riesco a trovare nulla su come nascondere quelle "Grid Lines".

Come posso rimuovere le linee della griglia?

javascript chart.js2

— iSS
fonte

341

Ho trovato una soluzione che funziona per nascondere le linee della griglia in un grafico a linee.

Imposta il gridLinescolore in modo che corrisponda al colore di sfondo del div.

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

o usare

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

— Irvine
fonte

2

Questo in realtà sta impostando il colore gridLines su un 0 opacitynero (un colore trasparente). Quindi questo dovrebbe funzionare indipendentemente dal colore di sfondo del div.

— XCS,

40

Oppure usa display: false, invece di "color"

— Irvine,

4

Grazie mille! Se solo la documentazione fosse un po 'più chiara su questo argomento. :)

— iSS

Volevo mantenere la scala ma perdere le linee della griglia sul retro del grafico, quindi questa risposta non ha funzionato per me.

— adg

1

Mentre questa prima risposta può arrivare all'immagine desiderata, è un po 'un trucco. La seconda soluzione, che in realtà imposta la proprietà display gridLines su false, sembra essere più corretta.

— Tot Zam,

57

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

— user2138568
fonte

5

Questa risposta mi ha permesso di mantenere la scala ma non di disegnare le linee della griglia sul grafico.

— Adg

19

Se vuoi che scompaiano per impostazione predefinita, puoi impostare:

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

— david
fonte

12

Se vuoi nascondere le linee della griglia ma vuoi mostrare yAxes, puoi impostare:

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

— Kathy
fonte

8

OK, non importa .. Ho trovato il trucco:

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

— hygorbudny
fonte

4

Il codice seguente rimuove le linee della griglia rimuovi dall'area del grafico, non solo quelle nelle etichette degli assi x e y

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

— Ahmed Adewale
fonte