使用ng2-charts填充折线图时API数据被覆盖，仅显示第一组数据

你的代码核心问题是始终只更新第一个数据集（datasets[0]），每次循环都会用新的一组数据覆盖掉之前的内容，最终图表只会渲染最后一次赋值的数据集（你看到显示第一组可能是循环逻辑异常或数据顺序问题，但本质是没有为每条折线创建独立的数据集）。

要显示三条折线，需要为API返回的每组数据创建对应的dataset对象，每个dataset对应一条折线。修改后的代码如下：

updateOrdersChartOptions(ordersChartData: AllDocsView2Chart) {
    if (ordersChartData) {
      // 清空原有数据集，准备新增三组数据
      this.lineChartData.datasets = [];
      
      // 遍历每组数据，生成对应的折线数据集
      for (let i = 0; i < ordersChartData.linesData.length; i++) {
        const newDataset = {
          label: `数据组${i+1}`, // 可根据实际需求自定义折线标签，比如从接口获取对应名称
          data: ordersChartData.linesData[i],
          borderColor: ['#FF6384', '#36A2EB', '#FFCE56'][i], // 为每条折线分配不同颜色
          fill: false,
          tension: 0.1
        };
        this.lineChartData.datasets.push(newDataset);
      }

      this.lineChartData.labels = ordersChartData.chartLabel;
      this.chart?.update();
    }
  }

关键说明 #

• 每条折线对应lineChartData.datasets中的一个对象，必须包含data属性，label和样式属性（如borderColor）可按需配置
• 如果需要保留项目中已有的折线样式模板，可以基于模板复制后修改data和label，避免重复配置样式
• 执行chart.update()前确保datasets数组的长度与API返回的linesData长度一致

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