Angular 角度海图-如何启用节点数据选项并动态更新

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

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

这是我的源代码的一个活片段

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

现在谈到这个问题，几天前我意识到需要显示一个适当的“无可用数据”信息，而不是显示空图表。我做了一些研究，发现它可以在highcharts中启用，并在纯JavaScript中找到了它的工作演示。那么现在我们如何使用角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);

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

将noData选项与角度5配合使用的正确方法是什么

如何确保其一致性？可能是不同的配置，如setData（[]）或setData（null）使其一致性出现，但我无法找出其不一致性背后的一个根本原因

如何动态切换noData消息。

还有，如果有什么我可以改进的，请提前告诉我，谢谢

p.S我确实找到了关于使用纯JavaScript实现目标的方法，但没有能够使用角度图表实现任何目标。下面是fiddle似乎正在使用的代码

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

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

感谢@Pandiyan解决了stackBlitz导入的问题

更新： 当我在本地尝试将nodata更改为display import时

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

对,

我得到以下导入错误

因此，当我试图遵循@daniel_的答案时，会出现以下错误

我的所有依赖项都与提供的stackBlitz同步。我也

• 删除了我的节点模块文件夹，并重新安装了我的所有依赖项
• 将@types/highcharts更新至最新版本

试试这个

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

...

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

在angular 5中使用noData选项的正确方法是什么

如何确保其一致性？可能是不同的配置，如setData（[]）或setData（null）使其一致地出现在中，但我无法找出其不一致性背后的一个根本原因

如何动态切换noData消息

Re 1。

noData

模块应能自动工作，因此如果您要在当前可见的序列中添加某个点，则“无数据”消息将消失。类似地，当您

remove（）

序列点时，序列将为空，那么“无消息”信息将在图表上可见。在手动使用的情况下，您当然可以像上面提到的那样进行操作。下面是一个简单的使用示例（包括按钮）：

Re 2。如果使用

setData（[]）

和

setData（null）

，则看起来很好。以下是示例：。如果你的意思不同，你能更准确地描述你的问题吗

Re 3。如果要动态更改

noData

消息，则应将

chart.options.lang.noData

属性设置为某个新字符串，然后调用

chart.hideNoData（）

和

chart.showNoData

刷新元素值。以下是适用于ng的示例：

[编辑]

参考您的问题更新，为了直接在组件中使用特定模块，而不是通过在提供程序中设置它，只需从

app.module.ts

文件中删除

{provide:HIGHCHARTS_MODULES，useFactory:（）=>[NoDataToDisplay]}

，然后使用

require在
app.component.ts
中加载相应的模块（）

语法，如下所示：

import Highcharts from 'highcharts';

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

现场示例：

亲切的问候

---

**

如果答案有帮助，请接受并投票。这并不能解决我的实际问题，即如何切换/更新noData消息。我想这三个问题的根本原因在于我导入noData的方式。当我在本地尝试导入noDataToDispl时，我的所有本地依赖项都与stackblitz同步是的，@pandiyan提到的方式，我得到“@types/highcharts/modules/no data to display”没有默认的导出。但是它在stackBlitz中工作得很好。我正在用更多的细节更新我的问题。我刚刚编辑了我的答案。请看一下。我对“nodata显示（highcharts）”感到困惑，我得到了”chartModule不是一个函数“运行时错误，当我用这个更新你的stackBlitz时。你能提供一个工作的stackBlitz吗？非常感谢所有这些帮助。第二次更新。抱歉误解。谢谢你的帮助。不过，最后一件事，我必须做”noData（Highcharts）"在每个使用highcharts的组件中？我想我也可以在模块的构造函数中这样做？但不知道延迟加载模块的结果如何。之前的方法非常好，因为noData被添加到模块提供程序中，并且在延迟加载模块的情况下，工厂始终保持单例应用程序。简言之，我不必为每个模块都这样做。我

import Highcharts from 'highcharts';

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