Question

我想更新特定的列背景颜色，但我不能这样做。看起来很容易，但我从谷歌尝试的所有解决方案都不起作用。代码如下。

var ctx = document.getElementById("myChart");
                                        var myChart = new Chart(ctx, {
                                            type: 'bar',
                                            data: {
                                                labels : ["A","B","C","D","E"],
                                                datasets: [{

                                                    data : [<?php echo $graph_data;?>],
                                                    backgroundColor: "rgba(0,0,220,0.5)",
                                                    borderColor: "rgba(0,0,220,1)",

                                                    borderWidth: 2
                                                }]
                                            }
                                        });

                                        //I would like to achieve something like this, let's say change the first and second bar's background color 
                                        myChart.datasets[0].bars[0].fillColor = "rgba(220,0,0,0.5)";
                                        myChart.datasets[0].bars[1].fillColor = "rgba(220,0,0,0.5)";
                                        myChart.update();

我有一个旧代码，它在1.0.1-beta.4版本下成功运行，但现在我想使用最新版本2.5.0，然后我遇到了这个问题。

感谢您的帮助！

Answer 1

您可以将数组传递给backgroundColor bar chart dataset property（而不是单一颜色），其中数组中的位置映射到数据数组中的位置。

例如，如果您有3个柱并且希望所有3个都是不同的颜色，只需将数组传递给backgroundColor，其中所有3个元素都具有不同的颜色值。

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Car", "Bike", "Walking"],
    datasets: [{
      label: 'Fuel',
      backgroundColor: [
        chartColors.red,
        chartColors.blue,
        chartColors.yellow],
      data: [
        randomScalingFactor(), 
        randomScalingFactor(), 
        randomScalingFactor(), 
      ]
    }]
  },
  options: {
    title: {
      display: true,
      text: "Chart.js - Different Bar Colors"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    responsive: true,
  }
});

这是一个codepen example来证明这一点。

ChartJS更新特定栏的背景颜色

1 个答案: