问题
I'm using angular2-highcharts and my chart works just fine, but I need to export the chart to XLS.
All I need to achieve this is doing
HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);
somewhere in the code, and the export options will show up by the chart.
The problem is how to import HighchartsExporting and HighchartsExportData properly, because the standard solution
@NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(
require('highcharts'),
require('highcharts/modules/exporting')
],
won't work with AOT, giving me some "Error encountered resolving symbol values statically" at compile time.
I can get it to work by doing
import * as HichartsExporting from 'highcharts/modules/exporting';
import * as HighchartsExportData from 'highcharts/modules/export-data';
as suggested here, but it gives me 2 errors:
- Error TS2497: Module '"xxxx/highcharts/modules/exporting"' resolves to a non-module entity and cannot be imported using this construct. - JIT compilation
- Cannot find module 'highcharts/modules/export-data'. - AOT compilation
I can get around this by doing
import HichartsExporting = require('highcharts/modules/exporting');
import HighchartsExportData = require('highcharts/modules/export-data');
as suggested here, but after AOT compilation, I get "Uncaught ReferenceError: require is not defined" at runtime.
All solutions seem to work fine in practice, I just can't compile them. Any suggestions are welcome.
回答1:
You can create an instance of Highcharts
with all modules loaded like HighchartsModule(Highcharts)
and then pass the instance to forRoot
function as explained in the angular2-highcharts docs.
You should be able to load the modules using require
or import
.
import * as Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);
or
import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);
and next the same as in the mentioned docs:
@NgModule({
...
imports: [
BrowserModule,
ChartModule.forRoot(
- require('highcharts'),
+ Highcharts
)
],
})
回答2:
Just in case this helps anyone, I couldn't do it using imports. Instead, I had to include the <script src="~/node_modules/highcharts/modules/exporting.js">
tag in my HTML. Since this JS is a self-invoking function, that's all it takes to make it work.
来源:https://stackoverflow.com/questions/47190713/how-to-import-exporting-js-and-export-data-js-using-angular2-highcharts-and-aot