Angular Highcharts hideNoData не работает динамически

Question

У меня проблемы с тем, чтобы hideNoData () и showNoData () работали с официальным компонентом highcharts-angular (https://github.com/highcharts/highcharts-angular).

) Вот базовый пример в stackblitz: https://stackblitz.com/edit/angular-highcharts-zvkcys?file=app%2Fapp.component.ts

Это упрощенная версия. В моем реальном проекте я извлекаю данные асинхронно, и во время загрузки я показываю свой индикатор загрузки (не тот, который предоставляет один из старших графиков), поэтому сначала я хочу отключить сообщение «Нет данных», но как только результатвозвращается, в зависимости от результата, который мне может понадобиться, чтобы показать сообщение без данных.

Я уже пытался использовать [(update)]="updateFlag" в компоненте диаграммы, чтобы вызвать изменение после вызова hideNoData(), но без эффекта.идет на update(), reflow() или redraw().

Я даже вручную вызвал detectChanges, чтобы вызвать цикл дайджеста, но также безрезультатно.

Answer 1

хорошо, я нашел решение.Очевидно, Highcharts не может справиться с этим в одном цикле дайджеста.если я позвоню

setTimeout(() => {
    chart.hideNoData();
});

Это работает и правильно скрыто.Однако сейчас он кратковременно мигает вначале, решение которого заключается в полном отключении автоматического сообщения.В опциях диаграммы добавьте следующее:

chart: {
    events: {
        load(): void {
            this.hasData = (): boolean => {
                return true;
            };
        },
    },
},

Answer 2

С Highcharts я считаю, что для моих компонентов важно знать справочную информацию по диаграммам, вы можете использовать поставляемый обратный вызов Output в highcharts-chart, чтобы сделать это.В вашем компоненте вы можете сделать:

public callback = this.chartCallback.bind(this);

Где chartCallback:

public chartCallback(chart: Highcharts.Chart)
{
    this.chart = chart;
}

HTML будет выглядеть так:

<highcharts-chart [Highcharts]="Highcharts" [options]="options
                  [callbackFunction]="callback">
</highcharts-chart>

Это позволяет нам захватыватьфактическая ссылка на объект Highchart, и используйте его следующим образом:

public hideNoData(): void
{
    this.chart.hideNoData();
}

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

См. здесь для полного рабочего примера.

---

Кроме того, если вы не хотите, чтобы no data message отображался.Тогда это может быть ваш лучший маршрут:

this.options = {
    title : { text : 'simple chart' },
    series: [{
        data: [],
    }],
    noData: null
};