Chart.js v2 - ukrywanie linii siatki


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

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

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;

12

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

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

8

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

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

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;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.