如何使用 highcharts 和 angular 启用 noData

Question

我想启用“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

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

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 添加到导入数组会给我一个错误。

Answer 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"
    };