Highcharts创建多个图表。想要只对第一个进行更改

Posted 2021-05-05

编辑Angular堆栈并在创建多个图表时遇到问题，只需要定制一个图表。

下面的代码创建了一个堆叠了所有图的图表，然后为虚拟滚动中右侧页面上堆叠的每个图创建一个图表。我正在尝试编辑ngIf以仅在图表id = rawTraceHighChart0（最上面的图表）时运行我的字幕功能，如果它是单个跟踪状态，则使用i设置。

我整天都在尝试不同的方法，并且无处不在，无法弄清楚这一点，所以我乞求任何帮助。我尝试使用新的#subtitle模板向ngIf添加id条件，尝试手动设置并搜索高低搜索。 #singlechart模板运行良好，我的字幕功能不会导致问题，但我找不到唯一的标识符/方法来创建仅适用于first / top / rawTraceHighChart0图表的ngIf的添加。

html：

<div *ngIf="displayDataSet && datasets; else loading">
    <div *ngIf="displayDataSet?.data?.length > 0; else noData">
        <div *ngIf="!anomExists" class="alert alert-warning">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i> Raw Trace not found for Run ID: {{this.displayStateService.appState.current.context['RUN_ID']}}
        </div>
        <div style="height: 100vh; overflow-y: auto;" *ngIf="Config.config.multiChart == 'true'; else singleChart">
            <virtual-scroll class="virtual-scroll" [childHeight]="300" [items]="datasets" (update)="viewPortItems = $event" (change)="indices = $event">
                <div *ngFor="let dataset of viewPortItems; let i = index;">
                    <div *ngFor="let name of dataset?.infoNames; let j = index;">
                        <h6 style="text-align: center;">{{ datasets[GetAdjustedIndex(i)]?.infoNames[j] }}:
                            <strong>{{ datasets[GetAdjustedIndex(i)]?.infoData[j] }}</strong>
                        </h6>
                    </div>
                    <app-highchart-platform *ngIf="SingleTraceDataSet" [id]="'rawTraceHighChart'+ GetAdjustedIndex(i)" [data]="SingleTraceDataSet[GetAdjustedIndex(i)]" [type]="'line'" [overrideConfig]="overrideConfigRawTrace" [title]="'Raw Trace'">
                        {{subtitle()}}
                    </app-highchart-platform>
                    <hr>
                </div>
            </virtual-scroll>
        </div>

        <ng-template #singleChart>

            <app-highchart-platform *ngIf="RawTraceDataSet" [id]="'rawTraceVPopulationHighChart'" [data]="RawTraceDataSet" [type]="'line'" [overrideConfig]="overrideConfigRawTrace" [title]="'Raw Trace vs. Population'">
                {{subtitle()}}
            </app-highchart-platform>

        </ng-template>

    </div>

    <ng-template #noData>
        No data available.
    </ng-template>

</div>

<ng-template #loading>
    <i class="fa fa-spinner fa-spin"></i> Loading data...
</ng-template>

字幕功能：

public subtitle() {
    const context = this.displayStateService.appState.current.context;
    this.overrideConfigRawTrace.subtitle = {
      useHTML: true,
      text: '<div align="center" style="font-size:80%">' + '<b>FAB: </b>' + context['FAB'] + '<b>, DESIGN ID: </b>'
       + context['DESIGN_ID'] + '<b>, STEP: </b>' + context['TRAVELER_STEP'] + '<br>' + '<b>TOOL: </b>'
      + context['TOOL_NAME'] + '<b>, PROCESS: </b>' + context['GERM_PROCESS'] + '<b>, RECIPE: </b>' + context['RECIPE_NAME']
       + '<br>' + '<b>SENSOR: </b>' + context['SENSOR_NAME'] + '<b>, RUN ID: </b>' + context['RUN_ID'] + '</div>',
    };
  }
  }

答案

实际上，问题出现在* ngIf中，假设你使用* ngIf作为div然后div只在条件为真时才在DOM上呈现，这就是为什么你的高亮图代码没有在浏览器上呈现的原因。而highchart正在搜索DOM上不存在的DOM上的ID元素。

如果不是那么您可以创建动态唯一ID并存储到数组中，然后根据索引值使用：例如

const dynamicIds = []; 
    const NUMBER_OF_RACES =5;
    for (let i = 1; i < NUMBER_OF_RACES; i += 1) {
       dynamicIds.push(Math.random().toString(36).substr(2, 5));
    }