如何使用 angular 5 的 highchart 3d？答案

【问题标题】：How to use highchart 3d with angular 5?如何使用 angular 5 的 highchart 3d？
【发布时间】：2017-11-13 13:34:50
【问题描述】：

我只是添加到 app.module.ts

import { ChartModule } from 'angular-highcharts';

导入

ChartModule

现在我想使用 highchart-3d 我怎样才能做到这一点？我可以自定义图表以使其类似于 morris.js 圆环图吗？

【问题讨论】：

标签： angular charts highcharts

【解决方案1】：

您可以从 npm 包中查看add-highcharts-modules。

highcharts-3d、highcharts-exporintg 等任何其他模块也可以添加到主图表模块之后的@NgModule 中

...
@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        require('highcharts'),
+       require('highcharts/highchart-3d'),
+       require('highcharts/modules/exporting')
      ],
})

检查http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview。

如果您遇到问题，请添加实时示例

【讨论】：

嗨，当我为生产进行构建时，出现了这个错误： ERROR in Error during template compile of 'AppModule' 装饰器不支持函数调用，但调用了 'ChartModule'。跨度>

【解决方案2】：

这种方法也有效：

import * as highcharts3d from 'highcharts/highcharts-3d';
export function highchartsFactory() {
    const hc = require('highcharts/highstock');
    highcharts3d(hc);
    return hc;
}

@NgModule({
imports: [
  ChartModule
],
providers: [
{
  provide: HighchartsStatic,
  useFactory: highchartsFactory //this will take care of inlcuding highcharts 3d module
}
]
});

【讨论】：

【解决方案3】：

试试这个：

import highcharts3D from 'highcharts/highcharts-3d.src';
highcharts3D(Highcharts);

Refer

【讨论】：

highcharts3D(Highcharts); 这是在 Angular cli 9.1.4 中引发错误