如何删除chart.js上的网格

Question

我正在使用 Chart.js 进行测试并尝试删除网格。 我的代码：

function grafica(){
    var chartData = {
        labels: [" ", " ", " "],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",//marges
                data: [30, 40, 45]
            }, {
                fillColor: "rgb(210,27,71)",
                strokeColor: "rgb(210,27,71)",//marges
                data: [56, 55, 40]
            }, {
                fillColor: "rgba(210,27,71,0)",
                strokeColor: "rgba(210,27,71,0)",//marges
                data: [0, 0, 0]
            }
        ]
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    var myBar = new Chart(ctx).Bar(chartData, {
        showTooltips: false,
        onAnimationComplete: function () {
            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor;
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
        }
    });
}

我该怎么做？ 我尝试了一些诸如添加“ ctx.gridLines = false; ”和“ ctx.ticks = false; ”之类的方法，但目前一切正常。

编辑：我按照您的指示做了一些更改，但我不知道为什么会起作用。 我使用的版本是 2.0.0-alpha

Answer 1

在 v3（ 更新文档）上更改为

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

Answer 2

我现在使用的是 2.0Alpha 版本，和你一样。

更新的文档链接

下面是一个没有网格线的简单条形图的例子。

您需要在选项对象的 y 和 xAxis 键上设置 'gridLines' 键。

 window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); var barChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: 'Dataset 1', backgroundColor: "rgba(151,187,205,0.5)", data: [100,99,98,97,96,95,94] }] }; window.myBar = new Chart(ctx).Bar({ data: barChartData, options: { responsive: true, scales: { xAxes: [{ gridLines: { show: true } }], yAxes: [{ gridLines: { show: false } }] } } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0-alpha/Chart.min.js"></script> <div> <canvas id="canvas"></canvas> </div>

Answer 3

试试看：

xAxis: {
    gridLineWidth: 0                
},
yAxis: {
    gridLineWidth: 0,
    minorTickInterval: null
}

将此添加到图表数据中，