#javascript #html5-canvas #chart.js #default
#javascript #html5-canvas #chart.js #По умолчанию
Вопрос:
Ситуация:
В настоящее время я интегрирую функцию динамической темной темы и мне нужно изменить значения по умолчанию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';
}
}
Проблема:
Существующие диаграммы на странице не сразу применяют измененные настройки по умолчанию. Они делают это только при обновлении (например, при всплывающей подсказке, изменении данных, изменении размера холста).
Я могу вручную обновить диаграмму, вызвав метод экземпляра .update()
Chart. Но у меня нет доступа ко всем существующим объектам диаграммы (нет доступа к области действия скриптов, создающих их), и я не нашел способа получить их глобально.
Вопрос:
- Есть ли способ принудительно обновить все диаграммы без их экземпляров диаграммы?
- или: Есть ли способ получить все экземпляры диаграммы, чтобы затем обновить их все?
- или: Это проблема XY, и есть способ исправить это, о котором я не думаю?
Я бы уже был удовлетворен ответом на один из вышеупомянутых вопросов.
Пример для воспроизведения проблемы:
Покажите и запустите фрагмент кода. Нажмите кнопку «toggleDarkTheme» и нажмите «количество голосов» или что-то еще, чтобы запустить обновление.
// 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>
Ответ №1:
Вы можете динамически перебирать экземпляры диаграммы, используя Chart.instances
объект. Например:
Chart.helpers.each(Chart.instances, function(instance){
instance.chart.update();
});
Я изменил ваш пример ниже, чтобы обновить все диаграммы в функции переключения. Вы заметите, что цвет шрифта теперь меняется при переключении.
// 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';
}
// Force updates to all charts
Chart.helpers.each(Chart.instances, function(instance){
instance.chart.update();
});
}
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
}
});
}
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>
</div>
<canvas id="myChart" width="400" height="400"></canvas>
Комментарии:
1. Спасибо! Это работает как шарм. Я так зол, что свойство
Chart.instances
нигде не задокументировано. Ни на веб-сайте, ни на GitHub … но это появляется в этом примере ; ну, это не помогает…