Chart.js多数组传递至HTML iFrame仅单折线图更新问题

问题场景 #

使用Chart.js实现图表，从数据库获取三组数据：

• loggedIn: [6.3, 2.4, 7.6, 5.4, 9.9, 7.8]
• available: [6.7, 2.2, 11.2, 5.5, 10.1, 7.9]
• availableForExisting: [7.2, 3.1, 8.2, 5.6, 9.2, 10.2]

遇到的问题：仅一条折线能更新数据，其余折线无变化。

排查与解决方法 #

1. 确保Chart实例引用独立 #

不要复用同一个变量存储多个Chart实例，否则会覆盖之前的实例引用，导致只有最后一个实例能被操作：

// 错误示例：复用变量导致实例被覆盖
let myChart;
myChart = new Chart(document.getElementById('chart1'), config1);
myChart = new Chart(document.getElementById('chart2'), config2);

// 正确示例：每个图表用独立变量存储
const chartLoggedIn = new Chart(document.getElementById('loggedInChart'), config1);
const chartAvailable = new Chart(document.getElementById('availableChart'), config2);
const chartAvailableExisting = new Chart(document.getElementById('availableExistingChart'), config3);

2. 数据更新后必须调用对应实例的update()方法 #

更新数据后，要针对每个实例单独调用update()，确保图表重新渲染：

// 更新loggedIn折线数据
chartLoggedIn.data.datasets[0].data = [6.3, 2.4, 7.6, 5.4, 9.9, 7.8];
chartLoggedIn.update();

// 更新available折线数据
chartAvailable.data.datasets[0].data = [6.7, 2.2, 11.2, 5.5, 10.1, 7.9];
chartAvailable.update();

// 更新availableForExisting折线数据
chartAvailableExisting.data.datasets[0].data = [7.2, 3.1, 8.2, 5.6, 9.2, 10.2];
chartAvailableExisting.update();

如果是同一图表内的多折线，需确保每个dataset都被赋值，再统一调用update()：

myChart.data.datasets[0].data = loggedInData;
myChart.data.datasets[1].data = availableData;
myChart.data.datasets[2].data = availableForExistingData;
myChart.update();

3. 排查iFrame通信逻辑（针对iFrame加载图表的场景） #

如果图表在iFrame中，需确保父页面完整传递所有数据集，且iFrame内正确接收并分配到对应图表：

• 父页面发送数据：

const iframe = document.getElementById('chartIframe');
iframe.contentWindow.postMessage({
  type: 'updateCharts',
  loggedIn: [6.3, 2.4, 7.6, 5.4, 9.9, 7.8],
  available: [6.7, 2.2, 11.2, 5.5, 10.1, 7.9],
  availableForExisting: [7.2, 3.1, 8.2, 5.6, 9.2, 10.2]
}, '*');

• iFrame内接收并处理：

window.addEventListener('message', (event) => {
  if (event.data.type === 'updateCharts') {
    // 为每个图表实例赋值数据
    chartLoggedIn.data.datasets[0].data = event.data.loggedIn;
    chartAvailable.data.datasets[0].data = event.data.available;
    chartAvailableExisting.data.datasets[0].data = event.data.availableForExisting;
    
    // 分别触发更新
    chartLoggedIn.update();
    chartAvailable.update();
    chartAvailableExisting.update();
  }
});

4. 检查数据集配置是否重复 #

初始化图表时，确保每个dataset有独立的label和data字段，避免配置覆盖：

const config = {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    datasets: [
      {
        label: 'Logged In',
        data: [],
        borderColor: '#ff4444'
      },
      {
        label: 'Available',
        data: [],
        borderColor: '#33b5e5'
      },
      {
        label: 'Available For Existing',
        data: [],
        borderColor: '#99cc00'
      }
    ]
  }
};

内容的提问来源于stack exchange，提问作者user9138698