Chart.js柱状图：网格颜色和隐藏标签

Question

Chart.js柱状图：网格颜色和隐藏标签

8

我试着改变chart.js中网格的背景颜色，按照文档所说尝试了很多方法，也进行了许多研究，但似乎无法找到合适的解决方法。我还想去掉顶部标签，但很难找到一个简单的方法来实现。我所说的标签是在这里的演示中显示为“我的第一个数据集”的标签: http://www.chartjs.org/docs/#bar-chart。

解决方案：

<canvas id="myChart"></canvas>
<script>
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
  datasets: [{
    label: "",
    data: [12, 19, 3, 5, 2, 3, 4],
    backgroundColor: "rgba(3, 118, 195, 0.5)",
    borderColor: "rgba(0, 158, 219, 1)",
    borderWidth: "2",
  }]
},
options: {
  legend:{
      display: false
  },
  scales: {
    xAxes: [{
        gridLines: {
            show: true,
            color: "F3F3F3",
        }
    }],
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  },

}
  });

</script>

谢谢！

- paradizzee

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Krishnakant · Accepted Answer

要隐藏标签，即图例：在选项中使用以下配置：

legend:{
       display:false
}

因此，在您的代码中：

options: {
    legend:{
           display:false
    },  
    scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }

并且，为画布元素使用 CSS 设置背景颜色：

<canvas id="myChart" style="background-color: grey;">

希望这对您有所帮助！