ng2-charts/Chart.js动态变量数据无法加载问题求助

核心问题 #

1. 数据类型不匹配：tempData通过toFixed()转为了字符串数组，而Chart.js折线图要求数值数据必须是数字类型，字符串无法被正确解析渲染。
2. 图表数据未同步更新：lineChartData在组件初始化时就已赋值，当时tempData是空数组；后续API返回数据后更新了tempData，但lineChartData内部的datasets.data和labels并未同步，Angular变更检测无法感知到对象内部属性的变化，导致图表不更新。

修复步骤 #

1. 修正数据类型 #

将tempData改为数字数组，替换原有的toFixed()处理：

// 替换原tempData赋值代码
this.tempData = this.graphData.hourly
  .slice(0, 8)
  .map((graph: any) => Math.round(graph.temp)); // 转为整数数字，如需保留小数可改用parseFloat(graph.temp.toFixed(1))

2. 同步更新图表数据 #

在API回调中，更新完tempData和timeData后，重新赋值lineChartData，触发Angular变更检测：

// 在getHourData的subscribe回调末尾添加
this.lineChartData = {
  ...this.lineChartData, // 保留原有样式配置
  datasets: [
    {
      ...this.lineChartData.datasets[0], // 继承原有数据集配置
      data: this.tempData // 更新数值数据
    }
  ],
  labels: this.timeData // 更新X轴标签
};
this.loaded = true;

3. 可选：简化数据绑定（替代步骤2） #

如果不想每次手动更新lineChartData，可以将其改为getter属性，让它始终依赖最新的tempData和timeData：

// 移除原有的lineChartData赋值，替换为getter
get lineChartData(): ChartConfiguration['data'] {
  return {
    datasets: [
      {
        label: 'Temp',
        data: this.tempData,
        fill: true,
        borderColor: '#f1612b',
        backgroundColor: '#f1642b2e',
        borderWidth: 2,
        pointRadius: 0,
        tension: 0.25,
        datalabels: {
          labels: {
            value: {
              color: 'black',
            },
          },
          align: 'end',
          offset: -0.5,
        },
      },
    ],
    labels: this.timeData
  };
}

修改后的完整ngOnInit回调示例 #

this.dataSerivce.getHourData(this.lat, this.lon).subscribe((data) => {
  if (data) {
    this.graphData = data;
  }
  // 时区偏移处理保留
  if (this.graphData.timezone_offset === -14400) {
    this.adjust = -3600;
  } else if (this.graphData.timezone_offset === -25200) {
    this.adjust = 7200;
  } else if (this.graphData.timezone_offset === -21600) {
    this.adjust = 3600;
  } else {
    this.adjust = 0;
  }
  // 修正数据类型
  this.tempData = this.graphData.hourly
    .slice(0, 8)
    .map((graph: any) => Math.round(graph.temp));
  this.timeData = this.graphData.hourly
    .slice(0, 8)
    .map((graph: any) =>
      formatDate(graph.dt * 1000, 'h a', 'en-US')
    );
  // 同步更新图表数据
  this.lineChartData = {
    ...this.lineChartData,
    datasets: [{
      ...this.lineChartData.datasets[0],
      data: this.tempData
    }],
    labels: this.timeData
  };
  this.loaded = true;
});

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