Angular Highcharts - Как включить опции noData и динамически обновлять их

Question

Я локально использую следующие зависимости highcharts:

• "angular-highcharts": "5.2.12"
• "highcharts": "6.1.0"
• "@ types / highcharts": "5.0.19"

Вот живой демо моего исходного кода,

Прежде всего яЯ хотел бы отметить, что использование и включение функциональности noData для highCharts довольно неубедительно.Там нет надлежащего руководства, где бы то ни было, относительно того, как правильно его использовать.

Теперь приступая к проблеме, несколько дней назад я осознал необходимость показывать правильное сообщение «нет данных» вместо того, чтобы показывать пустые диаграммы,Я провел некоторое исследование и обнаружил, что его можно включить в старших графиках, и нашел его демонстрацию в простом JavaScript.Так что теперь, как мы можем использовать его с Angular 5?Для этого потребовались дополнительные исследования и, наконец, я понял,

import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';
...    
@NgModule({
  ...
  providers: [
  { provide: HIGHCHARTS_MODULES, useFactory: () => [noDataToDisplay] }
]

(примечание: ^^ этот подход не работает в демоверсии связанных стеков, не знаю почему!)

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

Далее я хотел динамически переключать сообщение noData, то есть обновлять его программно, поэтому я попробовал следующееподход:

const options = this.chartConfig.ref.options;
  options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
this.chartConfig.ref.update(options, true);

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

1. Как правильно использовать параметр noData с угловым значением 5
2. Как убедиться, что он отображается последовательно? возможно, другая конфигурация, такая как setData ([]) или setData (null), заставляет его появляться последовательно, но я не могу найти одну основную причину его несоответствия.
3. Как я могу переключитьсяСообщение noData динамически.

Также, если есть что-то, что я могу улучшить, сообщите мне заранее, спасибо.

PS Мне удалосьнайдите это fiddle относительно достижения целей с помощью простого JavaScript, но не смогли достичь ничего, используя угловые старшие диаграммы.Вот код, который, по-видимому, использует прикрепленная скрипта.

if (!chart.hasData()) {
    chart.hideNoData();
    chart.showNoData("Your custom error message");
}

, вероятно, эти методы недоступны для используемой мной версии старших таблиц.

Спасибо @Pandiyan за исправление проблемы симпорт stackBlitz.

ОБНОВЛЕНИЕ: Когда локально я пытаюсь изменить импорт NoDataToDisplay с

import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';

на

import NoDataToDisplay from 'highcharts/modules/no-data-to-display';

, я получаюследующая ошибка импорта.

, из-за которой я получаю следующие ошибки, когда пытаюсь следовать ответу @daniel_s.

Все мои зависимости синхронизированы с предоставленным stackBlitz.Я также

• удалил мою папку node_modules и заново установил все мои зависимости.
• Обновил @ types / highcharts до последней версии.

Answer 1

1. Как правильно использовать параметр noData с угловым значением 5
2. Как сделать так, чтобы он отображался последовательно?возможно, из-за другой конфигурации, например setData ([]) или setData (null), он появляется постоянно, но я не могу найти одну основную причину его несоответствия.
3. Как динамически переключать сообщения noData.

Re 1. Модуль noData должен работать автоматически, поэтому, если вы добавите какую-либо точку в одну из ваших видимых в данный момент серий, сообщение «no-data» исчезнет.Точно так же, когда вы remove() указывает ряд, так что ряд будет пустым, тогда информация «без сообщений» будет отображаться на графике.В случае использования его вручную, конечно, вы можете сделать это так же, как вы упомянули выше.Вот простой пример использования (с включенными кнопками): https://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf

Re 2. Выглядит хорошо при использовании setData([]) и setData(null).Вот пример: https://stackblitz.com/edit/highcharts-toggling-nodata-54xrqh.Если вы имеете в виду что-то другое, не могли бы вы описать свой вопрос более точно?

Re 3. Если вы имеете в виду динамическое изменение сообщения noData, вам следует установить свойство chart.options.lang.noData равным некоторой новой строке, а затем вызватьchart.hideNoData() и chart.showNoData для обновления значения элемента.Вот пример, примененный к ng: https://stackblitz.com/edit/highcharts-toggling-nodata-hwnzcl

[EDIT]

Обращаясь к обновлению вашего вопроса, чтобы использовать определенный модуль непосредственно внутри компонента ине устанавливая его в провайдерах, просто удалите файл { provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] } из app.module.ts и загрузите соответствующий модуль в app.component.ts, используя синтаксис require(), как показано ниже:

import Highcharts from 'highcharts';

const noData = require('highcharts/modules/no-data-to-display')
noData(Highcharts)

Пример Live: https://stackblitz.com/edit/highcharts-toggling-nodata-muxx9s

С уважением!

**

Answer 2

Попробуйте это

import NoDataToDisplay from 'highcharts/modules/no-data-to-display';

...

{ provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] }  

Slackblitz