Chart.js条形图:网格颜色和隐藏标签

Question

我正在尝试在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>

谢谢!

Answer 1

隐藏标签,即只有传说:在下面的配置中使用options:

legend:{
       display:false
}

因此在你的代码中:

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

并且,对于背景颜色,使用css for canvas元素:

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

希望这能为你做到!