时间戳

首页 > 解决方案 > Angular Highcharts - 如何启用 noData 选项并动态更新它

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

问题描述

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

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

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

现在谈到这个问题，几天前我意识到需要显示一个正确的“无可用数据”消息，而不是显示空图表。我做了一些研究，发现它可以在 highcharts 中启用，并在纯 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. 使用角度 5 的 noData 选项的正确方法是什么
  2. 如何确保它始终如一地出现？可能不同的配置，如 setData([]) 或 setData(null) 使其始终出现，但我无法找出其不一致背后的根本原因。
  3. 如何动态切换 noData 消息。

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

PS我确实设法找到了这个关于使用纯 JavaScript 实现事情的小提琴，但无法使用 angular highcharts 实现任何事情。这是小提琴似乎正在使用的附加代码。

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 同步。我也

标签： angularhighchartsangular2-highcharts

解决方案

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

Re 1. 该noData模块应该自动工作，因此如果您将一些点添加到您当前可见的系列之一，那么“无数据”消息就会消失。同样，当您remove()点系列时，使系列为空，则图表上将显示“无消息”信息。如果手动使用它，当然可以像上面提到的那样进行。这是简单的使用示例（包括按钮）：https ://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf

setData([])Re 2. 如果使用and看起来不错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

[编辑]

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

import Highcharts from 'highcharts';

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

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

亲切的问候！

**

推荐阅读