去掉圖表js折線圖中的豎線

Question

我正在使用Chart.js生成地圖並在很大程度上對其進行了自定義。 但是無論如何我都無法刪除垂直網格線。 有沒有人遇到過這樣的情況？ 非常感謝幫助。

JavaScript

    var ChartDataHome = {
        labels: ["", "NOV", "DEC", "JAN", "FEB"],
        datasets: [{
            strokeColor: "rgba(255.255,255,1)",
            pointColor: "rgba(159,209,154,1)",
            pointStrokeColor: "rgba(255,255,255,1.00)",
            data: [4.5, 8.8, 7.5, 9.5, 7.8, 9]
        }]
    };

    var step = 2;
    var max = 10;
    var start = 0;

    ChartOptionsHome = {
        scaleLabel: "<%= value + ' K ' %>",
        pointDot: false,
        bezierCurve: false,
        scaleOverride: true,
        scaleSteps: 10,
        scaleSteps: Math.ceil((max - start) / step),
        scaleStepWidth: step,
        scaleStartValue: start,
        scaleShowGridLines: true,
        scaleGridLineWidth: 0,
        scaleGridLineColor: "rgba(0,0,0,0.1)",
        datasetFill: false,
        animation: true,
        animationSteps: 60,
        scaleFontColor: "#ffffff",
        scaleFontSize: 14,
        scaleLineColor: "rgba(255,255,255,1)",
        datasetStrokeWidth: 6,
        responsive: true,
    }

    if ($("#chartHome")[0]) {
        DrawTheChart(ChartDataHome, ChartOptionsHome, "chartHome", "Line");
    }

Answer 1

以下內容適用於 Chart.js 2.*。

如果您只有一個 x 軸，則是否顯示垂直網格線（與此 x 軸相關）由options.scales.xAxes[0].gridLines.display的布爾值指定。 更准確地說，以下圖表選項禁用了單 x 軸情況下垂直網格線的顯示。

options : {
    scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ]
    }
}

Answer 2

兩天前隨新版本的 Chart.js 發布了一個新的全局選項。

var options = {
    scaleShowVerticalLines: false
}

Answer 3

options : {
            scales: {
                yAxes: [{
                    gridLines: {
                        lineWidth: 0,
                        color: "rgba(255,255,255,0)"
                    }
                }]
            }
    };
Charts.js v2.0

Answer 4

嘗試"scaleShowGridLines" : false,

Answer 5

我認為你可以分開 x 和 y 軸。

 axes: { xaxis: { ticks: ticks, tickOptions: {showGridline:false} }, yaxis: { tickOptions: {showGridline:true} } }

希望這可以幫到你。

Answer 6

上述答案似乎已經過時，因為它們在我的 ChartJs 3.4.1（也可能是較低版本）中不起作用。

您現在可以使用以下內容：

options: {
    scales: {
      x: {
        grid: {
          display: false
        }
      },
    }        
}

這是不言自明的，但要刪除水平線，您可以將 x 替換為 y。