Chart.js v2 - menyembunyikan garis kisi

149

Saya menggunakan Chart.js v2 untuk menggambar grafik garis sederhana. Semuanya terlihat baik-baik saja, kecuali ada garis kisi yang tidak saya inginkan:

Dokumentasi untuk Line Chart ada di sini: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , tapi saya tidak dapat menemukan apa pun tentang menyembunyikan "Grid Lines" itu.

Bagaimana cara menghapus garis kisi?

javascript chart.js2

— iSS
sumber

341

Saya menemukan solusi yang berfungsi untuk menyembunyikan garis kisi dalam bagan Garis.

Atur gridLineswarnanya sama dengan warna latar belakang div.

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

atau gunakan

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

— Irvine
sumber

2

Ini sebenarnya mengatur warna gridLines ke 0 opacityhitam (warna transparan). Jadi ini harus bekerja terlepas dari warna latar belakang div.

— XCS

40

Atau gunakan tampilan: false, bukan "warna"

— Irvine

4

Terima kasih banyak! Andai saja dokumentasinya sedikit lebih jelas tentang hal ini. :)

— iSS

Saya ingin mempertahankan skala tetapi kehilangan garis kisi di bagian belakang grafik sehingga jawaban ini tidak berhasil untuk saya.

— adg

1

Meskipun jawaban pertama ini mungkin sampai ke gambar yang diinginkan, ini sedikit meretas. Solusi kedua, yang benar-benar mengatur properti tampilan gridLines menjadi false, tampaknya lebih benar.

— Tot Zam

57

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

— pengguna2138568
sumber

5

Jawaban ini memungkinkan saya untuk menjaga skala tetapi tidak menggambar garis kisi pada bagan.

— adg

19

Jika Anda ingin mereka pergi secara default, Anda dapat mengatur:

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

— David
sumber

12

Jika Anda ingin menyembunyikan garis kisi tetapi ingin menampilkan yAxes, Anda dapat mengatur:

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

— Kathy
sumber

8

Oke, tidak apa-apa .. Saya menemukan triknya:

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

— hygorbudny
sumber

4

Kode di bawah ini menghapus garis garis hapus dari area bagan, bukan yang ada di label sumbu x & y

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

— Ahmed Adewale
sumber