如何使用fusion4的fusioncharts？

Question

我安装了：

npm install fusioncharts

我是这样导入的：

 import * as  FusionCharts from  'fusioncharts';

但是，当我创建一个像这样的新对象时：

var fusioncharts = new FusionCharts({
    type: 'radar',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json'
});

该库试图加载http://localhost:4200/fusioncharts.powercharts.js （此路径中不存在此文件）

谁知道我做错了什么？谢谢！

Answer 1

首先使用“npm install angular4-fusioncharts --save”下一次安装“npm install fusioncharts --save”安装angular4-fusioncharts包

在主模块中导入它

import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import { FusionChartsModule } from 'angular4-fusioncharts';

FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    FusionChartsModule
],
providers: [],
bootstrap: [AppComponent]
 })
 export class AppModule { }

在你的app.component.ts中

import { Component } from '@angular/core';

 @Component({
   selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
   })
export class AppComponent {
id = 'chart1';
width = 600;
height = 400;
type = 'column2d';
dataFormat = 'json';
dataSource;
title = 'Angular4 FusionCharts Sample';

constructor() {
    this.dataSource = {
        "chart": {
            "caption": "Harry's SuperMart",
            "subCaption": "Top 5 stores in last month by revenue",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [
            {
                "label": "Bakersfield Central",
                "value": "880000"
            },
            {
                "label": "Garden Groove harbour",
                "value": "730000"
            },
            {
                "label": "Los Angeles Topanga",
                "value": "590000"
            },
            {
                "label": "Compton-Rancho Dom",
                "value": "520000"
            },
            {
                "label": "Daly City Serramonte",
                "value": "330000"
            }
        ]
    }
   }
 }

在component.html中

<fusioncharts
[id]="id"
[width]="width"
[height]="height"
[type]="type"
[dataFormat]="dataFormat"
[dataSource]="dataSource"
></fusioncharts>