我在本地使用以下高图表依赖项:
这是我的源代码的实时demo,
首先,我想指出的是,针对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);
当您从图例框中切换系列的可见性时,这确实起作用了一次,但是现在看来,这似乎也不起作用。我有以下问题,
如果还有什么我需要改进的地方,请提前告诉我。
PS 我确实找到了关于fiddle的有关使用纯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同步。我也
答案 0 :(得分:3)
- 在角度5中使用noData选项的正确方法是什么
- 如何确保它始终显示?可能有不同的配置(例如setData([])或setData(null))使它始终出现,但是我无法找出导致其不一致的根本原因。
- 如何动态切换noData消息。
Re 1. noData
模块应自动运行,因此,如果将点添加到当前可见的序列之一,则“无数据”消息消失。同样,当您remove()
指向系列时,该系列将为空,则“无消息”信息将在图表上可见。如果手动使用它,当然可以像上面提到的那样进行操作。这是简单的使用示例(包括按钮):https://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf
Re 2.如果使用setData([])
和setData(null)
,看起来不错。这是示例:https://stackblitz.com/edit/highcharts-toggling-nodata-54xrqh。如果您的意思有所不同,可以更准确地描述您的问题吗?
Re3。如果要动态更改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
,然后在{{ 1}}使用app.component.ts
语法,如下所示:
require()
实时示例: https://stackblitz.com/edit/highcharts-toggling-nodata-muxx9s
亲切的问候!
**
答案 1 :(得分:1)
尝试一下
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
...
{ provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] }