Angular Highcharts - 如何启用 noData 选项并动态更新它

Question

我在本地使用以下 highcharts 依赖项：

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

这是我的源代码的实时 demo，

首先我想指出的是，highCharts 的 noData 功能的使用和启用是相当可疑的。在任何地方都没有关于如何正确使用它的适当指南。

现在开始讨论这个问题，几天前我意识到需要显示正确的 "no data available" 消息而不是显示空图表。我做了一些研究，发现它可以在 highcharts 中启用，并在 JavaScript 中找到了它的工作演示。那么现在我们如何将它与 Angular 5 一起使用呢？这需要更多的研发，最后我弄明白了，

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

（注意：^^ 这种方法不适用于链接的 stackBlits 演示，不知道为什么！）

我确实成功地使用上述方法在我的 repo 中本地启用了它，但它并不健壮，即它没有始终如一地出现。

接下来我想动态切换 noData 消息，即以编程方式更新它，所以我尝试了以下方法：

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

当您从图例框中切换系列的可见性时，这确实起作用了一次，但现在这似乎也不起作用了。我有以下问题，

在 angular 5
如何确保它始终显示？ setData([]) 或 setData(null) 等不同的配置可能使它始终显示，但我无法找到找出其不一致背后的根本原因。
如何动态切换 noData 消息。

此外，如果有任何我可以改进的地方，请告诉我，在此先感谢。

P.S 我确实找到了这个 fiddle 关于使用普通 JavaScript 实现的东西，但还没有实现任何东西使用 angular 图表。这是附加的代码 fiddle 似乎正在使用。

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

可能这些方法不适用于我正在使用的 highcharts 版本。

感谢@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

试试这个

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

...

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

Slackblitz

Answer 2

What is the proper way of using noData option with angular 5

How to make sure it appears consistently? probably different configuration like setData([]) or setData(null) makes it appears in consistently, but I am not able to find out one root cause behind its inconsistency.

How can I toggle noData message dynamically.

回复 1. noData 模块应该自动工作，因此如果您要向当前可见的系列之一添加一些点，则 "no-data" 消息会消失。同样，当您 remove() 系列点时，系列将是空的，然后 "no-message" 信息将在图表上可见。如果手动使用它，当然你可以像上面提到的那样做。这是一个简单的使用示例（包括按钮）：https://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf

Re 2. 如果使用 setData([]) 和 setData(null) 看起来不错。这是示例： https://stackblitz.com/edit/highcharts-toggling-nodata-54xrqh 。如果您的意思不同，能否更准确地描述您的问题？

关于 3。如果你的意思是动态改变 noData 消息，你应该设置 chart.options.lang.noData 属性等于一些新的字符串，然后调用 chart.hideNoData() 和 chart.showNoData刷新元素值。这是应用于 ng 的示例：https://stackblitz.com/edit/highcharts-toggling-nodata-hwnzcl

[编辑]

参考您的问题更新，为了直接在组件中使用特定模块而不是通过在提供程序中设置它，只需从 app.module.ts 文件中删除 { provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] }，然后加载适当的模块app.component.ts 使用 require() 语法，如下所示：

import Highcharts from 'highcharts';

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

实例： https://stackblitz.com/edit/highcharts-toggling-nodata-muxx9s

亲切的问候！

**

Angular Highcharts - 如何启用 noData 选项并动态更新它

Angular Highcharts - How to enable noData options and update it dynamically

highcharts

angular2-highcharts

angular