Chart.js v2 - ızgara çizgilerini gizleme


149

Basit bir çizgi grafik çizmek için Chart.js v2 kullanıyorum. İstemediğim ızgara çizgileri dışında her şey iyi görünüyor:

İstemediğim Izgara Çizgileri

Çizgi Grafik için belgeler burada: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , ama bu "Kılavuz Çizgileri" gizleme hakkında hiçbir şey bulamıyorum.

Izgara çizgilerini nasıl kaldırabilirim?

Yanıtlar:


341

Çizgi grafikte ızgara çizgilerini gizlemek için çalışan bir çözüm buldum.

gridLinesRengi, div'ın arka plan rengiyle aynı olacak şekilde ayarlayın .

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

veya kullan

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

2
Bu aslında gridLines rengini 0 opacitysiyaha (saydam bir renk) ayarlamaktır. Bu, div'in arka plan renginden bağımsız olarak çalışmalıdır.
XCS

40
Veya display: false yerine "color" kullanın
Irvine

4
Çok teşekkür ederim! Sadece bu konuda dokümantasyon biraz daha açık olsaydı. :)
iSS

Ölçeği korumak istedim ama grafiğin arkasındaki kılavuz çizgilerini kaybetmek istedim, bu yüzden bu cevap benim için işe yaramadı.
adg

1
Bu ilk cevap istenen resme ulaşsa da, bir parça hack'tir. GridLines display özelliğini false olarak ayarlayan ikinci çözüm daha doğru görünüyor.
Tot Zam

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

5
Bu cevap ölçeği korumama izin verdi, ancak tabloya kılavuz çizgileri çizmedi.
adg

19

Varsayılan olarak gitmelerini istiyorsanız şunları ayarlayabilirsiniz:

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

12

Kılavuz çizgilerini gizlemek, ancak yAxes'i göstermek istiyorsanız, şunları ayarlayabilirsiniz:

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

8

Tamam, boş ver .. Hile buldum:

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

4

Aşağıdaki kod ızgara çizgilerini yalnızca x & y ekseni etiketlerindeki çizgileri değil, grafik alanından kaldırır

Chart.defaults.scale.gridLines.drawOnChartArea = false;
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.