Question

我想启用＆＃34; noData＆＃34;功能，默认情况下，当图表中没有数据显示时会显示一条消息。它在他们的文档中说该功能需要在页面中加载文件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添加到imports数组会给我一个错误。

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

如何使用highcharts和angular启用noData

1 个答案: