WebDataRocks是否支持仪表板多Pivot报表与图表配置？

WebDataRocks完全支持在同一个仪表板中实现多行多组的透视表+图表布局，每组基于独立数据渲染是可行的。你遇到的仅能加载首个/最后一个图表的问题，确实和你提到的两个操作直接相关：

问题1：重复的图表容器ID #

DOM中元素的ID必须唯一，你循环渲染时所有图表容器都用googlechart-container这个ID，浏览器只会识别到第一个（或最后一个）匹配的容器节点，其他图表无法找到正确的挂载目标，自然无法渲染。

问题2：@ViewChild的使用局限 #

Angular的@ViewChild默认只会获取模板中第一个匹配的组件实例。如果是循环生成的多个<wbr-pivot>组件，用@ViewChild只能拿到其中一个，导致其他透视表对应的图表初始化逻辑无法被触发。

解决方法 #

• 生成唯一的图表容器ID：在循环渲染时，根据索引或唯一标识为每个容器生成专属ID，比如在Angular模板中写：

  <div *ngFor="let item of pivotConfigs; let i = index">
    <wbr-pivot [report]="item.reportConfig"></wbr-pivot>
    <div id="googlechart-container-{{i}}"></div>
  </div>
  

  初始化图表时，对应使用googlechart-container-{{i}}这个动态ID。

• 改用@ViewChildren获取所有透视表实例：在组件类中通过@ViewChildren获取所有<wbr-pivot>组件的实例列表，这样就能遍历每个实例并绑定对应的图表渲染逻辑：

  import { ViewChildren, QueryList } from '@angular/core';
  import { WbrPivotComponent } from '@webdatarocks/webdatarocks-angular';
  
  // ...
  @ViewChildren(WbrPivotComponent) pivotComponents: QueryList<WbrPivotComponent>;
  
  ngAfterViewInit() {
    this.pivotComponents.forEach((pivot, index) => {
      pivot.webdatarocks.on('reportcomplete', () => {
        pivot.webdatarocks.googlecharts.getData({
          type: 'column'
        }, (data) => {
          google.visualization.drawChart(
            document.getElementById(`googlechart-container-${index}`),
            data,
            {}
          );
        });
      });
    });
  }
  

• 保证每组数据与配置独立：确保每组透视表的reportConfig包含独立的数据源和配置项，避免不同组之间的数据或设置冲突。

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