Question

我使用angular2-highcharts并且我的图表工作正常，但我需要将图表导出到XLS。

我需要做的就是做

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);

代码中的某处，导出选项将显示在图表中。

问题是如何正确导入HighchartsExporting和HighchartsExportData，因为standard solution

@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        require('highcharts'),
        require('highcharts/modules/exporting')
      ],

无法使用AOT，给我一些＆＃34;错误在编译时静态解析符号值＆＃34; 。

我可以通过

来实现它

import * as HichartsExporting from 'highcharts/modules/exporting';
import * as HighchartsExportData from 'highcharts/modules/export-data';

建议here，但它给了我2个错误：

错误TS2497：模块＆＃39;＆＃34; xxxx / highcharts / modules / exports＆＃34;＆＃39;做出决议到非模块实体，不能使用此构造导入。 - JIT编译
找不到模块＆＃39; highcharts / modules / export-data＆＃39;。 - AOT编译

我可以通过

解决这个问题

import HichartsExporting  = require('highcharts/modules/exporting');
import HighchartsExportData = require('highcharts/modules/export-data');

建议here，但在AOT编译之后，我得到＆＃34; 未捕获的ReferenceError：未定义的需求＆＃34;在运行时。

所有解决方案在实践中似乎都运行良好，我只是无法编译它们。欢迎任何建议。

Answer 1

您可以创建Highcharts的实例，其中加载的所有模块都为HighchartsModule(Highcharts)，然后按照angular2-highcharts docs中的说明将实例传递给forRoot函数。

您应该可以使用require或import加载模块。

import * as Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);

或

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

，接着与上述文档相同：

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
-       require('highcharts'),
+       Highcharts
      )
    ],
})

Answer 2

以防这有助于任何人，我无法使用导入。相反，我必须在我的HTML中包含<script src="~/node_modules/highcharts/modules/exporting.js">标记。由于这个JS是一个自我调用函数，所以只需要它就可以工作。

如何使用angular2-highcharts和AOT编译器导入exports.js和export-data.js？

2 个答案: