如何使用 highcharts 和 angular 启用 noData答案

【问题标题】：How to enable noData with highcharts and angular如何使用 highcharts 和 angular 启用 noData
【发布时间】：2018-03-05 22:32:54
【问题描述】：

我想启用“noData”功能，默认情况下，当图表中没有要显示的数据时会显示一条消息。它在他们的文档中说，该功能需要在页面中加载文件 no-data-to-display.js。

我的 node_modules/highcharts 文件夹中已经有这个文件，但我不确定我应该如何从那里加载它，所以我也想知道如何做到这一点。现在，我已经通过将此脚本标签添加到我的index.html 来加载它：

<script src="http://code.highcharts.com/modules/no-data-to-display.js"></script>

它给了我以下错误：

Uncaught ReferenceError: Highcharts is not defined
    at no-data-to-display.js:10
    at no-data-to-display.js:10

这是我 app.module.ts 中所有与 highcharts 相关的内容

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as Highcharts from 'highcharts';

imports: [
    ChartModule,
],
providers: [{
    provide: HighchartsStatic,
    useValue: Highcharts
}]

谢谢。

编辑：

我尝试在我的app.module.ts 中导入无数据文件：

import HighchartsNoDataToDisplay from 'highcharts/modules/no-data-to-display.src.js';

我不确定下一步是什么。将 HighchartsNoDataToDisplay 添加到导入数组会给我一个错误。

【问题讨论】：

检查此post 会有所帮助
@Deep3015 我还是不明白该怎么做：/ 我没有使用 systemjs。你能解释一下吗？
能加个plunker我试试
@Deep3015 我从来没有真正使用过 plunker.. :S 如何将我的项目添加到其中？

标签： angular highcharts angular2-highcharts

【解决方案1】：

我能够通过执行以下操作来完成这项工作：

//wherever you're importing the highcharts library
import Highcharts from "highcharts";
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';

NoDataToDisplay(Highcharts); //initialize the module

//wherever you're setting up the chartOptions array before the call
// to .chart('container', chartOptions)
    //noData
    chartOptions['lang'] = {
        noData: "No Data Available"
    };

【讨论】：