Chart.js流式插件自定义时间：替换实时时间为Simulink仿真时间

问题根源 #

你遇到的问题来自两个核心点：

• onRefresh 回调函数内的 this 指向并非Vue组件实例，导致无法正确读取 simuTime
• Chart.js的realtime类型X轴默认要求接收毫秒级时间戳，而你的仿真时间是秒数，格式不匹配导致图表渲染异常

修复方案 #

1. 修正回调上下文 #

在mounted钩子中先保存Vue实例引用，避免回调内this指向错误：

mounted() {
  const ctx = this.$refs.mychart;
  const vm = this; // 保存当前Vue组件实例
  // ... 其他代码不变
  
  var config = {
    // ... 其他配置不变
    options: {
      scales: {
        x: {
          type: 'realtime',
          realtime: {
            delay: 1000,
            onRefresh: chart => {
              // 用vm代替this获取组件属性
              const currentSimuTime = vm.simuTime * 1000; // 秒转毫秒适配时间轴
              chart.data.datasets[0].data.push({
                x: currentSimuTime,
                y: vm.V1[0].value
              });
              chart.data.datasets[1].data.push({
                x: currentSimuTime,
                y: vm.F1[0].value
              });
            }
          }
        }
      }
    }
  };
  
  // ... 后续代码不变
}

2. 适配时间格式 #

如果你的simuTime是秒级数值（如1、2.5、3...），必须乘以1000转成毫秒级时间戳，才能匹配Chart.js实时轴的默认时间单位。若仿真时间本身已是毫秒级，可跳过此转换。

3. 自定义X轴显示格式（可选） #

如果希望X轴直接显示秒数而非原始时间戳，可添加ticks格式化函数：

x: {
  type: 'realtime',
  realtime: { /* ... 现有配置 ... */ },
  ticks: {
    callback: function(value) {
      return (value / 1000).toFixed(1) + 's'; // 毫秒转秒并保留一位小数
    }
  }
}

完整修正后的代码 #

simuTime() {
  return this.$store.getters.simulationTime;
},
mounted() {
  const ctx = this.$refs.mychart;
  const vm = this;
  const data = {
    labels: [],
    datasets: [
      {
        label: "Mains_1_Voltage",
        data: [],
        backgroundColor: "rgba(54, 162, 235, 0.2)",
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
      },
      {
        label: "Mains_1_Frequency",
        data: [],
        backgroundColor: "rgba(248, 109, 181, 1)",
        borderColor: "rgba(163, 109, 181, 1)",
        borderWidth: 1,
      },
    ],
  };
  var config = {
    type: "line",
    data: data,
    options: {
      scales: {
        x: {
          type: 'realtime',
          realtime: {
            delay: 1000,
            onRefresh: chart => {
              const currentSimuTime = vm.simuTime * 1000;
              chart.data.datasets[0].data.push({
                x: currentSimuTime,
                y: vm.V1[0].value
              });
              chart.data.datasets[1].data.push({
                x: currentSimuTime,
                y: vm.F1[0].value
              });
            }
          },
          ticks: {
            callback: function(value) {
              return (value / 1000).toFixed(1) + 's';
            }
          }
        },
        y: {
          beginAtZero: true,
        },
      },
    },
  };
  const myChart = new Chart(ctx, config);
  this.simu_time_interval = setInterval(() => {
    this.$store.dispatch('calculateSimulationTime');
  }, 500);
},
beforeUnmount() {
  clearInterval(this.simu_time_interval);
}

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