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

Question

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

• “角高图”：“ 5.2.12”
• “ highcharts”：“ 6.1.0”
• “ @ types / highcharts”：“ 5.0.19”

这是我的源代码的现场演示，

首先，我想指出的是，highCharts的noData功能的用法和启用是非常阴暗的。关于如何正确使用它，没有适当的指导。

现在谈到这个问题，几天前，我意识到有必要显示适当的“无可用数据”消息，而不是显示空白图表。我进行了一些研究，发现可以在高级图表中启用它，并在纯JavaScript中找到了可行的演示。那么现在我们如何在Angular 5中使用它呢？那需要更多的研发，最后我弄清楚了，

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

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

我确实使用上述方法成功地在我的仓库中启用了它，但是它并不健壮，也就是说，它看起来并不一致。

接下来，我想动态切换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. 在angular 5中使用noData选项的正确方法是什么
2. 如何确保它始终显示？可能使用setData（[]）或setData（null）之类的不同配置使它始终出现，但是我无法找出其不一致背后的根本原因。
3. 如何动态切换noData消息。

另外，如果有任何我可以改善的地方，请提前告知我。

PS我确实设法找到了有关使用纯JavaScript实现功能的小提琴，但还无法使用有角度的图表来实现。这是小提琴似乎正在使用的附加代码。

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

1. 在angular 5中使用noData选项的正确方法是什么
2. 如何确保它始终显示？可能使用setData（[]）或setData（null）之类的不同配置使它始终出现，但是我无法找出其不一致背后的根本原因。
3. 如何动态切换noData消息。

关于1.该noData模块应自动运行，因此，如果将点添加到当前可见的系列之一，则“无数据”消息消失。同样，当remove()系列指向点时，系列将为空，则“无消息”信息将在图表上可见。如果手动使用它，当然可以像上面提到的那样进行操作。这是简单的使用示例（包括按钮）：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

[编辑]

参考您的问题更新，为了直接在组件内使用特定模块，而不是通过在提供程序中进行设置，只需删除{ provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] }from app.module.ts文件，然后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

亲切的问候！

**