web-dev-qa-db-ja.com

Chart.js v2 - グリッド線を隠す

単純な折れ線グラフを描画するためにChart.js v2を使用しています。私がしたくないグリッド線があることを除けば、すべて問題なく見えます。

Grid Lines I don't want

折れ線グラフのドキュメントは次のとおりです。 https://nnnick.github.io/Chart.js/docs-v2/#line-chart 私はそれらの「グリッド線」を隠すことについて何も見つけることができません。

グリッド線を削除する方法

javascriptchart.js2
93
iSS

折れ線グラフでグリッド線を非表示にするための解決策を見つけました。

gridLinesの色をdivの背景色と同じになるように設定します。

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

または使用

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

デフォルトでそれらを消したい場合は、単純に次のように設定できます。

Chart.defaults.scale.gridLines.display = false;
16
david
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}
13
user2138568

グリッド線を非表示にしたいがyAxesを表示したい場合は、次のように設定できます。

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

OK、絶対に気にしないでください。

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