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

Chart.js v2 - menyembunyikan garis kisi

Jawaban: