Javascript 使用基于日期的Angular 9 Chart.js多线条折线图

备注

(1)为了使我的答案更有说服力，我更改了这些变量的名称:

• operators%至uniqueOperators%
• x%至uniqueOperator%

(2)我把一些let改成了const，因为它从来没有重新分配过

(3)Updates

• 在同一日期处理多个操作员
• 添加了完整的代码

代码

您需要将您的逻辑更新为类似的内容:

const uniqueOperators = [...new Set(data.map((x) => x.operatorName))];
const uniqueDates = [...new Set(data.map((x) => x.date))];

const subLabelDatasets = uniqueOperators.map((uniqueOperator) => {
  // find by operatorName and date in `data`
  // if not found, fill with `0`
  let datasets = uniqueDates.map((uniqueDate) =>
    data.find(
      (item) =>
        item.operatorName === uniqueOperator && item.date === uniqueDate
    )?.totalCount ?? 0
  );

  return {
    label: uniqueOperator,
    data: datasets,
  };
});

这将输出一个您预期的数组:

[
    {label: 'OSEN+', data: [1, 7, 0, 1, 0, 0, 0]}
    {label: 'MBC', data: [0, 0, 1, 0, 1, 1, 15]}
]

即使API输出的数据在相同的日期包含多个运算符，该代码也会起作用:

const data = [
  { operatorName: 'OSEN+', date: '01-06-2023', totalCount: 1 },
  { operatorName: 'MBC', date: '01-06-2023', totalCount: 2 },
];

将输出:

[
    {label: 'OSEN+', data: [1]}
    {label: 'MBC', data: [2]}
]

您可以使用uniqueDates替换硬编码的lineChartLabels，如下所示

this.lineChartLabels = [...uniqueDates];

完整代码

(在您的Stackblitz演示上测试)

export class AppComponent {
  /**Line chart */
  public lineChartType: ChartType = 'line';
  public lineChartData: any = [];
  public lineChartLabels: any = [];
  public lineChartOptions = {
    responsive: true,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };
  /**Line chart */

  ngOnInit(): void {
    let data = [
      { operatorName: 'OSEN+', date: '05-04-2023', totalCount: 1 },
      { operatorName: 'OSEN+', date: '12-04-2023', totalCount: 7 },
      { operatorName: 'MBC', date: '01-06-2023', totalCount: 1 },
      { operatorName: 'OSEN+', date: '02-06-2023', totalCount: 1 },
      { operatorName: 'MBC', date: '09-06-2023', totalCount: 1 },
      { operatorName: 'MBC', date: '16-06-2023', totalCount: 1 },
      { operatorName: 'MBC', date: '23-06-2023', totalCount: 15 },
    ];

    const uniqueOperators = [...new Set(data.map((x) => x.operatorName))];
    const uniqueDates = [...new Set(data.map((x) => x.date))];

    this.lineChartData = uniqueOperators.map((uniqueOperator) => {
      // find by operatorName and date in `data`
      // if not found, fill with `0`
      let datasets = uniqueDates.map((uniqueDate) =>
        data.find(
          (item) =>
            item.operatorName === uniqueOperator && item.date === uniqueDate
        )?.totalCount ?? 0
      );
    
      return {
        label: uniqueOperator,
        data: datasets,
      };
    });

    this.lineChartLabels = [...uniqueDates];
  }
}

我希望它能帮上忙！