Highcharts создает несколько графиков. Хочешь внести изменения только первым

Question

Редактирование углового стека и проблемы с созданием нескольких графиков, когда требуется настроить только один.

Приведенный ниже код создает диаграмму со всеми сложенными графиками, а затем создает одну диаграмму для каждого графика, сложенного на странице справа в виртуальной прокрутке. Я пытаюсь отредактировать ngIf, чтобы он выполнял только мою функцию субтитров, когда идентификатор диаграммы = rawTraceHighChart0(самая верхняя диаграмма), которая устанавливается с i, если это набор с одной трассировкой.

Я пробовал разные методы для этого весь день и искал повсюду и не могу понять это, поэтому я прошу любую помощь. Я попытался добавить условие идентификатора в ngIf с помощью нового шаблона #subtitle, попытался установить его вручную и искать ответы в верхнем и нижнем регистре. Шаблон #singlechart прекрасно работает, и моя функция субтитров не вызывает проблем, но я не могу найти уникальный идентификатор / метод для создания дополнения к ngIf, которое будет применяться только к первой диаграмме /top/rawTraceHighChart0.

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. Предположим, что если вы используете *ngIf для div, тогда div отображается только в DOM, когда условие выполнено, поэтому ваш код для старшей диаграммы не отображается в браузере. и highchart ищет элемент идентификатора в DOM, которого нет в DOM.

Если это не так, вы можете создать динамические уникальные идентификаторы и сохранить их в массиве, а затем использовать в соответствии со значением индекса: например,

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));
    }