代码之家 › 专栏 › 技术社区 › Saif

角度海图-如何启用noData选项并动态更新

angular2-highcharts highcharts angular

Saif · 技术社区 · 6 年前

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

“highcharts”:“6.1.0”

这是现场直播 demo 我的源代码,

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

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);

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

在angular 5中使用noData选项的正确方法是什么
如何确保其一致性? 可能是setData([])或setData(null)等不同的配置使其一致地出现在中,但我无法找出其不一致性背后的一个根本原因。

另外,如果有什么我可以改进做让我知道,提前谢谢。

附笔我找到了这个 fiddle 关于使用纯JavaScript实现目标,但是还不能使用角度海图实现任何目标。下面是fiddle似乎正在使用的代码。

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

感谢@Pandiyan修复了stackBlitz导入的问题。

更新: 当我在本地尝试更改NoDataToDisplay import时,

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

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

我得到以下导入错误。

因此,当我试图跟随@daniel\u的答案时,我得到了以下错误。

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

2 回复 | 直到 6 年前

daniel_s 6 年前

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

如何确保其一致性?可能是setData([])或setData(null)等不同的配置使其一致地出现在中,但我无法找出其不一致性背后的一个根本原因。

问题1.问题 noData remove() 序列点,使序列为空,则“无消息”信息将在图表上可见。在手动使用的情况下,当然你可以像上面提到的那样。下面是一个简单的使用示例(包括按钮): https://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf

setData([]) setData(null) https://stackblitz.com/edit/highcharts-toggling-nodata-54xrqh . 如果你的意思不同,你能更准确地描述一下你的问题吗?

野田 动态消息,您应该设置 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.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

谨致问候!

Pandiyan Cool 6 年前

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

...

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

Slackblitz