Chart.js删除网格线

Question

由于文档看起来不是特别清楚，所以停留在chart.js项目上。

简单地尝试从图表中删除网格线。我尝试了在Stack overflow中引用的两种旧语法：

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

和新的语法：

options: {
    scales: {
      y: {
        grid: {
          drawBorder: false
        }
      }
    }
  }

两者都不起作用..。

下面是我的代码片段：

​

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 10, 5, 8, 11]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        }
      }],
      y: {
        grid: {
          drawBorder: false
        }
      },
    }
  }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<html>

  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</html>

​

Answer 1

您要查找的属性名为display而不是drawBorder，而且您的xAxes的定义方式也有误，您使用的是v2语法而不是v3

示例：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 10, 5, 8, 11]
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          display: false,
        }
      },
      y: {
        grid: {
          display: false
        }
      },
    }
  }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<html>

  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</html>

​

Answer 2

我也有同样的问题，我通过将网格线的颜色设置为白色来解决它，如下所示：

  scales: {
    xAxes: [{
      gridLines: {
        color: '#ffffff'
      }
    }]
  }

Answer 3

以下是解决方案。

看起来在新版本中有很多配置发生了变化。

Reference from documentation here.

​

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 10, 5, 8, 11]
    }]
  },
   options: {
     scales: {
      x: {
        grid: {
           drawOnChartArea:false
         }
      },
       y: {
        grid: {
           drawOnChartArea:false
         }
      }
    }
   }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<html>

  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</html>

​