0

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

我需要做的就是做到这一点

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);

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

问题是如何正确导入 HighchartsExporting 和 HighchartsExportData，因为标准解决方案 

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

不适用于 AOT，在编译时给我一些“遇到静态解析符号值的错误” 。

我可以通过做

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

正如这里所建议的那样，但它给了我2个错误：

  • 错误 TS2497：模块 '"xxxx/highcharts/modules/exporting"' 解析为非模块实体，无法使用此构造导入。- JIT 编译
  • 找不到模块“highcharts/modules/export-data”。- AOT 编译

我可以通过这样做来解决这个问题

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

正如这里所建议的那样，但是在 AOT 编译之后，我在运行时得到“未捕获的 ReferenceError：require is not defined ”。

所有解决方案在实践中似乎都可以正常工作，我只是无法编译它们。欢迎任何建议。

4

2 回答 2

1

您可以创建一个Highcharts加载所有模块HighchartsModule(Highcharts)的实例，然后将实例传递给forRoot函数，如angular2-highcharts 文档中所述。

您应该能够使用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
      )
    ],
})
于 2017-11-10T11:10:04.407 回答
0

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

于 2017-11-10T14:51:05.237 回答