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

Question

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

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

我整天都在尝试不同的方法来解决这个问题，到处寻找，但无法解决这个问题，所以我请求任何帮助。我尝试使用新的#subtitle 模板向 ngIf 添加 id 条件，尝试手动设置它并搜索高低搜索答案。 #singlechart 模板效果很好，我的副标题功能没有引起问题，但我找不到唯一的 identifier/method 来创建仅适用于 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>',
    };
  }
  }

Answer 1

实际上，问题出在 *ngIf 中，假设如果您对 div 使用 *ngIf，那么当条件为真时，div 仅在 DOM 上呈现，这就是为什么您的 highchart 代码没有在浏览器上呈现的原因。 highchart 正在搜索 DOM 上的 ID 元素，而 DOM.

上不存在该元素

如果不是，那么您可以创建动态唯一 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));
    }

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

Highcharts creating multiple charts. Want to make changes to only the first

highcharts

typescript

angular-ng-if

ngfor

angular