创建条形图后如何更改其背景颜色？

Posted 2023-03-25

【中文标题】创建条形图后如何更改其背景颜色？

【英文标题】：How can I change the background colors of a bar chart after it has been created?

【发布时间】：2019-07-21 17:23:42

【问题描述】：

如何在创建条形图后更改其颜色？我有以下。

https://codepen.io/anon/pen/QoboRg?editors=1010#0

// can't move to home.js because the label is dynamic
var topClickSourceChart = new Chart('dashboard-click-source-chart', 
    type: 'bar',
    data: 
      datasets: [
    	  label: "NONE", data: [14],label: "Facebook", data: [10],label: "Google", data: [5],label: "Reddit", data: [1],label: "Twitter", data: [1],
   	  ]
    ,
);
topClickSourceChart.data.datasets[0].backgroundColor = '#4D90C3';
topClickSourceChart.data.datasets[1].backgroundColor = '#866DB2';
topClickSourceChart.data.datasets[2].backgroundColor = '#EA6F98';
topClickSourceChart.data.datasets[3].backgroundColor = '#61BDF6';
topClickSourceChart.data.datasets[4].backgroundColor = '#768BB7';

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" integrity="sha256-MZo5XY1Ah7Z2Aui4/alkfeiq3CopMdV/bbkc/Sh41+s=" crossorigin="anonymous"></script>

<canvas id="dashboard-click-source-chart"  ></canvas>

It used to work。我不明白发生了什么变化，尤其是因为我有一个资源完整性哈希属性。

这里的整页 sn-p 似乎可以工作，但在小型 sn-p 中却不行，而且它在 CodePen 中不起作用，在我的本地站点上也不起作用。

为什么它会忽略某些网站的背景颜色而不是其他网站的背景颜色？

【问题讨论】：

你只需要重绘这个东西..这就是为什么它可以在完整的 sn-p 上工作，因为你再次触发了绘图

@TemaniAfif 你如何重绘？我在 API 中找不到该函数。 chartjs.org/docs/latest/getting-started/usage.html

是的，调整窗口大小确实会显示颜色。

我在下面尝试触发调整大小事件但不起作用

【参考方案1】：

我找到了.update() 函数。

https://www.chartjs.org/docs/latest/developers/updates.html

我只需要添加

topClickSourceChart.update();

有趣的是，它有时是如何工作的，但有时却不是，这取决于窗口的大小。

// can't move to home.js because the label is dynamic
var topClickSourceChart = new Chart('dashboard-click-source-chart', 
    type: 'bar',
    data: 
      datasets: [
    	  label: "NONE", data: [14],label: "Facebook", data: [10],label: "Google", data: [5],label: "Reddit", data: [1],label: "Twitter", data: [1],
   	  ]
    ,
);
topClickSourceChart.data.datasets[0].backgroundColor = '#4D90C3';
topClickSourceChart.data.datasets[1].backgroundColor = '#866DB2';
topClickSourceChart.data.datasets[2].backgroundColor = '#EA6F98';
topClickSourceChart.data.datasets[3].backgroundColor = '#61BDF6';
topClickSourceChart.data.datasets[4].backgroundColor = '#768BB7';
topClickSourceChart.update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" integrity="sha256-MZo5XY1Ah7Z2Aui4/alkfeiq3CopMdV/bbkc/Sh41+s=" crossorigin="anonymous"></script>

<canvas id="dashboard-click-source-chart"  ></canvas>