为何ChartJS会合并两个图表？附Vue模板代码求助

这个问题我之前在项目里也踩过坑，核心原因大概率是JavaScript引用类型的特性导致的，结合你的代码来看，主要有这几个可能的诱因：

1. 复用了同一个配置/数据对象 #

你定义的ChartOptions和ChartConfig是全局对象，在JavaScript中，对象是引用传递而非值传递。如果创建两个图表实例时直接复用这两个对象，那两个图表会共享同一份配置和数据——不管修改哪一个，另一个都会跟着变化，最终就会呈现出“两个图表合并”的效果。

举个错误示例：

mounted() {
  // 错误：两个图表共用同一个配置对象
  new Chart(this.$refs.cpu, ChartConfig);
  new Chart(this.$refs.memory, ChartConfig);
}

这种情况下，两个图表会共享ChartConfig里的data，看起来就像叠加在了一起。

2. 未正确隔离Chart实例的作用域 #

如果你的Chart实例变量没有做隔离（比如用同一个变量名存储两个实例），虽然更多是覆盖而非合并，但也可能导致渲染异常：

// 错误：后创建的实例覆盖了前一个
let myChart = new Chart(this.$refs.cpu, config1);
myChart = new Chart(this.$refs.memory, config2);

解决办法 #

方法一：为每个图表创建独立的配置对象 #

不要复用同一个ChartConfig和ChartOptions，可以通过深拷贝或手动创建新对象的方式，确保每个图表拥有独立的配置和数据：

// 深拷贝基础配置（适合结构不复杂的对象）
const cpuConfig = JSON.parse(JSON.stringify(ChartConfig));
const memoryConfig = JSON.parse(JSON.stringify(ChartConfig));

// 分别设置各自的专属数据
cpuConfig.data = /* CPU相关数据 */;
memoryConfig.data = /* 内存相关数据 */;

// 分别创建独立实例
new Chart(this.$refs.cpu, cpuConfig);
new Chart(this.$refs.memory, memoryConfig);

如果配置里包含函数（比如tooltip回调），JSON.parse(JSON.stringify())会失效，这时可以手动复制对象，或者用Lodash的_.cloneDeep做深拷贝。

方法二：用扩展运算符快速生成独立配置 #

在Vue的mounted钩子中，通过ES6扩展运算符复制基础配置，再覆盖各自的data，也是一种简洁的方式：

mounted() {
  // 确认两个ref都能正确拿到DOM元素
  if (!this.$refs.cpu || !this.$refs.memory) return;

  // 创建CPU图表
  new Chart(this.$refs.cpu, {
    ...ChartConfig,
    data: /* CPU专属数据集 */
  });

  // 创建内存图表
  new Chart(this.$refs.memory, {
    ...ChartConfig,
    data: /* 内存专属数据集 */
  });
}

完整的Vue组件示例 #

<template>
  <div class="chart">
    <div>
      <canvas ref="cpu"></canvas>
    </div>
    <div>
      <canvas ref="memory"></canvas>
    </div>
  </template>
</script>
<script>
import Chart from "./deps/Chart.bundle";

export default {
  mounted() {
    // 基础配置模板
    const baseOptions = {
      scales: {
        xAxes: [{ stacked: true, type: 'time', time: { unit: 'hour' } }],
        yAxes: [{ ticks: { max: 45 }, stacked: true }]
      }
    };
    const baseConfig = {
      type: 'scatter',
      options: baseOptions
    };

    // CPU图表专属配置
    const cpuConfig = {
      ...baseConfig,
      data: {
        datasets: [{
          label: 'CPU使用率',
          data: [{x: '2024-01-01T00:00:00', y: 12}, {x: '2024-01-01T01:00:00', y: 25}],
          backgroundColor: 'rgba(255, 99, 132, 0.2)'
        }]
      }
    };

    // 内存图表专属配置
    const memoryConfig = {
      ...baseConfig,
      data: {
        datasets: [{
          label: '内存使用率',
          data: [{x: '2024-01-01T00:00:00', y: 18}, {x: '2024-01-01T01:00:00', y: 30}],
          backgroundColor: 'rgba(54, 162, 235, 0.2)'
        }]
      }
    };

    // 创建两个独立的图表实例
    new Chart(this.$refs.cpu, cpuConfig);
    new Chart(this.$refs.memory, memoryConfig);
  }
};
</script>

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