简体   繁体   English

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

[英]Chart.js bar chart : Grid color and hide label

I'm trying to change to background color of my grid in chart.js, I've tried following the documentation and I've done a lot of research but I can't seem to figure it out. 我正在尝试在chart.js中更改我的网格的背景颜色,我已经尝试按照文档进行了很多研究,但我似乎无法弄明白。 I also want to get rid of the top label, can't find an easy way to do that either. 我也想摆脱顶级品牌,也找不到一个简单的方法。 The label I'm talking about is the label that says "My first dataset" on the demo here: http://www.chartjs.org/docs/#bar-chart 我正在谈论的标签是在这里演示的“我的第一个数据集”的标签: http//www.chartjs.org/docs/#bar-chart

Solution: 解:

<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>

Thanks! 谢谢!

To hide lable ie nothing but legend: Use below config in options : 隐藏标签,即只有传说:在options使用以下配置:

legend:{
       display:false
}

Thus in your code: 因此在你的代码中:

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

And, for background color use css for canvas element: 并且,对于背景颜色,使用css for canvas元素:

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

Hope this will do for you! 希望这能为你做到!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM