Chart.js v2 - ukrywanie linii siatki

149

Używam Chart.js v2 do narysowania prostego wykresu liniowego. Wszystko wygląda dobrze, z wyjątkiem linii siatki, których nie chcę:

Linie siatki, których nie chcę

Dokumentacja dla wykresu liniowego jest tutaj: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , ale nie mogę znaleźć nic o ukrywaniu tych „Linii siatki”.

Jak mogę usunąć linie siatki?

iSS
źródło

Odpowiedzi:

341

Znalazłem rozwiązanie, które działa do ukrywania linii siatki na wykresie liniowym.

Ustaw gridLineskolor tak, aby był taki sam jak kolor tła elementu div.

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

albo użyj

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}
Irvine
źródło
2
W rzeczywistości jest to ustawienie koloru gridLines na 0 opacityczarny (przezroczysty kolor). To powinno działać niezależnie od koloru tła elementu div.
XCS
40
Lub użyj display: false, zamiast „color”
Irvine
4
Dziękuję Ci bardzo! Gdyby tylko dokumentacja była trochę jaśniejsza na ten temat. :)
iSS Kwietnia
Chciałem zachować skalę, ale straciłem linie siatki z tyłu wykresu, więc ta odpowiedź nie zadziałała.
adg
1
Chociaż ta pierwsza odpowiedź może doprowadzić do pożądanego obrazu, jest to trochę hack. Drugie rozwiązanie, które faktycznie ustawia właściwość display gridLines na false, wydaje się być bardziej poprawne.
Tot Zam
57
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}
user2138568
źródło
5
Ta odpowiedź pozwoliła mi zachować skalę, ale nie rysować linii siatki na wykresie.
adg
19

Jeśli chcesz, aby znikały domyślnie, możesz ustawić:

Chart.defaults.scale.gridLines.display = false;
david
źródło
12

Jeśli chcesz ukryć linie siatki, ale chcesz pokazać yAxes, możesz ustawić:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]
Kathy
źródło
8

OK, nieważne ... znalazłem sztuczkę:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }
hygorbudny
źródło
4

Poniższy kod usuwa tylko linie siatki z obszaru wykresu, a nie te w etykietach osi X i Y

Chart.defaults.scale.gridLines.drawOnChartArea = false;
Ahmed Adewale
źródło