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";
        }
    });
}

我该怎么办？我尝试过添加＆＃34; ctx.gridLines = false; ＆＃34;和＆＃34; ctx.ticks = false; ＆＃34;但目前一切正常。

编辑：我按照你的指示做了一些改动，但我不知道为什么有效。我使用的版本是2.0.0-alpha

Answer 1

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

Updated Documentation Link

以下是没有网格线的简单条形图的示例。

您需要设置＆＃39; gridLines＆＃39;键入选项对象的y和xAxis键。

＆＃13;

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
              }
            }]
          }
      }
  });

}

＆＃13;

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

＆＃13;

Answer 2

在 v3 (Updated docs) 上更改为

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

Answer 3

尝试使用：

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

将其添加到图表数据

如何删除chart.js上的网格

3 个答案: