【发布时间】：2020-12-13 08:45:21
【问题描述】：
情况：
我目前正在集成动态深色主题功能，并且需要在更改主题时更改 Chart.js 的默认值。它看起来像这样（高度简化）：
function changeTheme(darkTheme = false) {
if (darkTheme) {
document.body.classList.add('dark-theme');
Chart.defaults.global.defaultFontColor = 'white';
} else {
document.body.classList.remove('dark-theme');
Chart.defaults.global.defaultFontColor = 'black';
}
}
问题：
页面上的现有图表不会立即应用更改的默认设置。仅在他们进行更新时（例如在工具提示、数据更改、画布大小调整）。
我可以通过调用Chart的实例方法.update()来手动更新图表。但我无法访问所有现有图表对象（无法访问创建它们的脚本范围），也没有找到全局获取它们的方法。
问题：
- 有没有办法在没有 Chart 实例的情况下强制更新所有图表？
- 或者：有没有办法让所有图表实例都更新它们？
- 或者：这是XY Problem，有没有我没有考虑过的解决方法？
我已经对上述问题之一的答案感到满意。
重现问题的示例：
显示并运行代码 sn-p。点击“toggleDarkTheme”按钮并点击“# of Votes”或其他内容来触发更新。
// set function for theme
function changeTheme(darkTheme = false) {
if (darkTheme) {
document.body.classList.add('dark-theme');
Chart.defaults.global.defaultFontColor = 'white';
} else {
document.body.classList.remove('dark-theme');
Chart.defaults.global.defaultFontColor = 'black';
}
}
changeTheme(false);
// button to toggle theme
let darkThemeActive = false;
document.getElementById('toggleDarkTheme').addEventListener('click', ()=>{
darkThemeActive = !darkThemeActive;
changeTheme(darkThemeActive);
});
/* example chart, pretend like you dont have access to this scope ;) */
{
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
document.getElementById('triggerManualUpdate').addEventListener('click', ()=>{
myChart.update();
});
}button {
background-color: #eee;
color: rgba(0,0,0,0.87);
border: none;
border-radius: 3px;
padding: 0.5rem;
}
.dark-theme {
background-color: #212121;
color: white;
}
.dark-theme button {
background-color: #212121;
color: white;
}<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<div>
<button id="toggleDarkTheme">toggleDarkTheme</button>
<button id="triggerManualUpdate">triggerManualUpdate</button>
</div>
<canvas id="myChart" width="400" height="400"></canvas>【问题讨论】：
标签： javascript html5-canvas chart.js default