javascript - 更新所有 Chart.js 实例以应用更改后的默认值？

Question

情况:

我目前正在集成动态深色主题功能，需要更改 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';
  }
}

---

问题:

页面上的现有图表不会立即应用更改后的默认设置。仅在他们进行更新时(例如在工具提示上、数据更改、 Canvas 大小调整)。

我可以通过调用实例方法.update()来手动更新图表的图表。但我无权访问所有现有的图表对象(无权访问创建它们的脚本的范围)，并且我没有找到全局获取它们的方法。

---

问题:

1. 有没有办法在没有图表实例的情况下强制更新所有图表？
2. 或者:有没有办法获取所有图表实例，然后将它们全部更新？
3. 或者:这是 XY Problem有一种我没有想到的方法可以解决这个问题吗？

如果能回答上述问题之一，我就已经很满意了。

---

重现问题的示例:

显示并运行代码片段。点击“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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d0dbd2c1c79dd9c0f3819d8a9d80" rel="noreferrer noopener nofollow">[email protected]</a>/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>

Answer 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efdf6ffeceab0f4eddeacb0a7b0ad" rel="noreferrer noopener nofollow">[email protected]</a>/dist/Chart.min.js"></script>
<div>
  <button id="toggleDarkTheme">toggleDarkTheme</button>
</div>
<canvas id="myChart" width="400" height="400"></canvas>