Angular 9中Chart.js多折线图按日期生成数据问题求助

核心思路 #

先提取所有唯一日期并排序作为图表标签，再按运营商分组数据，最后遍历所有日期为每个运营商填充对应值（无数据则填0），生成符合Chart.js要求的数据集。

1. 定义数据接口 #

先规范API返回的数据结构，避免类型混乱：

interface CarrierData {
  carrier: string;
  date: string;
  value: number;
}

2. 提取并排序所有日期 #

从API响应中提取所有不重复的日期，按时间顺序排序后作为lineChartLabels：

// 假设apiResponse是从接口获取的CarrierData数组
const allDates = Array.from(new Set(apiResponse.map(item => item.date)))
  .sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
this.lineChartLabels = allDates;

3. 分组数据并填充缺失值 #

先按运营商分组存储日期与对应数值的映射，再遍历所有日期为每个运营商生成完整数据集：

// 按运营商分组：key为运营商名称，value为日期-数值的Map
const carrierGroups = apiResponse.reduce((groups, item) => {
  if (!groups[item.carrier]) {
    groups[item.carrier] = new Map();
  }
  groups[item.carrier].set(item.date, item.value);
  return groups;
}, {} as Record<string, Map<string, number>>);

// 生成每个运营商的折线数据集
this.lineChartData = Object.entries(carrierGroups).map(([carrier, dateValueMap]) => {
  const data = allDates.map(date => dateValueMap.get(date) || 0);
  return {
    label: carrier,
    data: data,
    borderColor: this.getRandomColor(), // 可选：给每条折线分配随机颜色
    fill: false
  };
});

4. 辅助函数（可选）：生成随机颜色 #

如果需要为不同运营商的折线分配不同颜色，可添加以下函数：

private getRandomColor(): string {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

5. 完整组件示例 #

以下是整合后的组件代码（假设使用ng2-charts集成Chart.js）：

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

interface CarrierData {
  carrier: string;
  date: string;
  value: number;
}

@Component({
  selector: 'app-carrier-line-chart',
  templateUrl: './carrier-line-chart.component.html',
  styleUrls: ['./carrier-line-chart.component.css']
})
export class CarrierLineChartComponent implements OnInit {
  public lineChartData: ChartDataSets[] = [];
  public lineChartLabels: Label[] = [];
  public lineChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      yAxes: [{ ticks: { beginAtZero: true } }]
    }
  };
  public lineChartType: ChartType = 'line';
  public lineChartLegend = true;

  ngOnInit(): void {
    // 替换为实际HTTP请求
    this.fetchApiData().then(response => {
      this.processChartData(response);
    });
  }

  private async fetchApiData(): Promise<CarrierData[]> {
    // 模拟API返回数据，实际替换为this.http.get请求
    return [
      { "carrier": "联通", "date": "2024-05-01", "value": 120 },
      { "carrier": "联通", "date": "2024-05-03", "value": 90 },
      { "carrier": "移动", "date": "2024-05-01", "value": 200 },
      { "carrier": "移动", "date": "2024-05-02", "value": 150 },
      { "carrier": "电信", "date": "2024-05-02", "value": 80 },
      { "carrier": "电信", "date": "2024-05-03", "value": 100 }
    ];
  }

  private processChartData(apiResponse: CarrierData[]): void {
    // 提取排序后的日期标签
    const allDates = Array.from(new Set(apiResponse.map(item => item.date)))
      .sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
    this.lineChartLabels = allDates;

    // 运营商数据分组
    const carrierGroups = apiResponse.reduce((groups, item) => {
      if (!groups[item.carrier]) {
        groups[item.carrier] = new Map();
      }
      groups[item.carrier].set(item.date, item.value);
      return groups;
    }, {} as Record<string, Map<string, number>>);

    // 生成最终数据集
    this.lineChartData = Object.entries(carrierGroups).map(([carrier, dateValueMap]) => ({
      label: carrier,
      data: allDates.map(date => dateValueMap.get(date) || 0),
      borderColor: this.getRandomColor(),
      fill: false
    }));
  }

  private getRandomColor(): string {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

对应的模板文件（carrier-line-chart.component.html）：

<div style="width: 80%; margin: 0 auto;">
  <canvas baseChart
          [datasets]="lineChartData"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [chartType]="lineChartType"
          [legend]="lineChartLegend">
  </canvas>
</div>

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