javascript - Chart.js 条形图 : Grid color and hide label

Question

我正在尝试在 chart.js 中更改为我的网格的背景颜色，我已经尝试按照文档进行操作并且做了很多研究，但我似乎无法弄清楚。我也想摆脱 top 标签，也找不到简单的方法。我所说的标签是在此处的演示中显示“我的第一个数据集”的标签: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>

谢谢!

Answer 1

要隐藏标签，即只是图例:在 options 中使用以下配置:

legend:{
       display:false
}

因此在您的代码中:

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

并且，对于背景颜色，请为 Canvas 元素使用 css:

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

希望这对你有用!