Angular Highcharts - 如何启用noData选项并动态更新它-Java 学习之路

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

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

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

首先，我想指出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);

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

What is the proper way of using noData option with angular 5
How to make sure it appears consistently? 可能是不同的配置，如setData（[]）或setData（null）使它一致地出现，但我无法找出其不一致背后的一个根本原因 .
How can I toggle noData message dynamically.

如果有任何我可以改进的事情请让我知道，提前谢谢 .

P.S 我确实设法找到了这个fiddle关于使用普通JavaScript实现的东西但是无法使用角度高图进行任何操作 . 这是附加小提琴似乎正在使用的代码 .

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

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

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

UPDATE: 本地尝试更改NoDataToDisplay导入时，

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

至，

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

我收到以下导入错误 .

enter image description here

由于我得到以下错误，当我尝试关注@daniel_s时 .

enter image description here

使用提供的stackBlitz，我的所有依赖项都是同步的 . 我也

删除了我的node_modules文件夹并重新安装了所有依赖项 .
将@ types / highcharts更新为最新版本 .

2 回答

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

Re 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 . 如果你的意思不同，你能更精确地描述你的问题吗？

Re 3.如果您的意思是动态更改 noData 消息，则应将 chart.options.lang.noData 属性设置为等于某个新字符串，然后调用 chart.hideNoData() 和 chart.showNoData 来刷新元素值 . 以下是应用于ng的示例：https://stackblitz.com/edit/highcharts-toggling-nodata-hwnzcl

[EDIT]

请参阅您的问题更新，为了直接在组件中使用特定模块而不是在提供程序中设置它，只需从 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)
```
Live example: https://stackblitz.com/edit/highcharts-toggling-nodata-muxx9s

亲切的问候！

**
回复于 2024-04-20T22:20:33+08:00

试试这个

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

...

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

Slackblitz

回复于 2024-04-20T22:20:33+08:00

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

2 回答

相关问题