如何将HTML中动态用例数据传递给Angular组件生成对应折线图

核心思路 #

给每个用例对应的图表容器生成唯一动态ID，然后遍历用例列表，为每个用例匹配对应的数据并渲染图表。

步骤1：修改HTML模板，生成动态ID #

利用*ngFor循环中的用例唯一标识（比如usecase.id），为每个图表容器生成不重复的ID：

<div *ngFor="let usecase of usecaseList">
  <!-- 用例表格 -->
  <table>
     <tr>
       <td>{{ usecase.name }}</td>
       <!-- 其他表格内容 -->
     </tr>
  </table>
  <!-- 动态生成图表容器ID -->
  <div [id]="'chart-' + usecase.id" style="width: 100%; height: 300px;"></div>
</div>

步骤2：组件中批量渲染图表 #

在Angular组件的视图初始化完成后，遍历用例列表，为每个用例匹配数据并渲染对应图表：

import { Component, OnInit, AfterViewInit } from '@angular/core';

declare var google: any; // 声明Google Charts全局变量

@Component({
  selector: 'app-usecase-dashboard',
  templateUrl: './usecase-dashboard.component.html',
  styleUrls: ['./usecase-dashboard.component.css']
})
export class UsecaseDashboardComponent implements OnInit, AfterViewInit {
  usecaseList: any[] = [];

  constructor(private apiService: YourApiService) { }

  ngOnInit(): void {
    // 从后端API获取用例数据
    this.apiService.getUsecaseData().subscribe(data => {
      this.usecaseList = data;
      // 数据加载完成后触发图表渲染
      this.renderCharts();
    });
  }

  ngAfterViewInit(): void {
    // 确保Google Charts加载完成
    google.charts.load('current', { packages: ['corechart'] });
  }

  private renderCharts(): void {
    // 等待Google Charts加载完成后执行渲染
    google.charts.setOnLoadCallback(() => {
      this.usecaseList.forEach(usecase => {
        // 转换当前用例的图表数据为Google Charts格式
        const chartData = google.visualization.arrayToDataTable(usecase.chartdata);
        
        // 图表配置项
        const options = {
          legend: { position: 'right' },
          hAxis: { title: 'x-axis' },
          vAxis: { logScale: false, title: 'Metric value' }
        };

        // 获取当前用例对应的图表容器
        const chartElement = document.getElementById(`chart-${usecase.id}`);
        if (chartElement) {
          const lineChart = new google.visualization.LineChart(chartElement);
          lineChart.draw(chartData, options);
        }
      });
    });
  }
}

关键注意事项 #

• 唯一标识：必须确保每个用例有唯一的属性（如id），避免DOM ID冲突导致图表渲染错误
• 异步时机：图表渲染必须在数据加载完成且视图初始化完成后执行，否则会找不到DOM元素
• Google Charts加载：务必通过google.charts.setOnLoadCallback确保图表库加载完成后再执行渲染逻辑

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