Question

我正在尝试使用chart.js制作实时图表，但我似乎无法更改颜色填充。

<script type="text/javascript">
  var canvas = document.getElementById('updating-chart'),
  ctx = canvas.getContext('2d'),
  startingData = {
    labels: ["A", "B", "C", "D"],
    datasets: [
    {
      label: "Product A",
      fillColor: "rgba(206, 70, 90, 1)",
      strokeColor: "rgba(220,220,220,0.8)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      data: [65, 59, 80, 81],
      options: {
        scales: {
                  yAxes: [{
                    ticks: {
                    beginAtZero:true,
                    min: 0,
                    max: 10
                    }
                  }]
                }
              }
    }
    ]
  };

  var myLiveChart = new Chart(ctx,{
    type: 'bar',
    data: startingData,
    responsive: true,
    maintainAspectRatio: true
  });

  setInterval(function(){
    // Get a random index point
    var indexToUpdate = Math.round(Math.random() * startingData.labels.length);

    // Update one of the points in the second dataset
    myLiveChart.data.datasets[0].data[indexToUpdate] = Math.random() * 100;

    myLiveChart.update();
  }, 500);

</script>

我已经清楚地改变了轴并将y设置为最大值，但它仍然溢出并保持动态改变轴长度。我该如何解决这个问题？

即使我更改了rgba值，第一个栏的颜色仍然显示为灰色。帮助

Answer 1

请参阅以下链接以更改colors.try background-color。如果您分享小提琴，它将有所帮助。

http://www.chartjs.org/docs/#chart-configuration-colors

Answer 2

在数据集数组中添加以下代码。颜色会改变。

backgroundColor:"rgba(206, 70, 90, 1)"

https://jsfiddle.net/Smita31Jain/4zpuxvke/

对于溢出和动态更改轴长度问题，请从 startingData 对象的数据集数组中取出选项属性对象代码并添加它是 myLiveChart 图表实例。请参阅下面的jsfiddle

https://jsfiddle.net/Smita31Jain/zzpkxg3k/

希望这就是你要找的东西。

无法更改chart.js颜色填充或y轴

2 个答案:

http://www.chartjs.org/docs/#chart-configuration-colors