如何使用角度5的高图3d?

时间:2017-11-13 13:34:50

标签: angular charts highcharts

我刚刚添加到app.module.ts

import { ChartModule } from 'angular-highcharts';

并导入

ChartModule

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

3 个答案:

答案 0 :(得分:1)

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

  

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

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

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

如果您遇到问题,请添加实例

答案 1 :(得分:1)

此方法也有效:

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
}
]
});

有关更多详细信息:https://github.com/gevgeny/angular2-highcharts/issues/193

答案 2 :(得分:0)

尝试一下:

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

Refer