Как изменить цвета фона гистограммы после ее создания?

Question

Как я могу изменить цвета гистограммы после ее создания?У меня есть следующее.

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.и это не работает на моем локальном сайте.

Почему на некоторых сайтах игнорируется цвет фона, а на других нет?

Answer 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" height="200" width="200"></canvas>