在创建条形图后,如何更改条形图的颜色?我有以下内容。
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" height="200" width="200"></canvas>
它曾经工作。我不明白什么变化,尤其是因为我有资源完整性哈希属性。
它似乎在这里的整页片段中工作,但在小片段中不起作用,并且在Codepen中不起作用,并且在我本地的网站上不起作用。
为什么它会忽略某些站点上的背景颜色,而不是其他网站?
我找到了.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" height="200" width="200"></canvas>