如何在angular4中使用fusioncharts？

Question

I installed with:

npm install fusioncharts

I imported like this:

 import * as  FusionCharts from  'fusioncharts';

but, when i made a new object like this:

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

the library try to load http://localhost:4200/fusioncharts.powercharts.js
(this file doesn't exist in this path)

Anyone knows what I'm doing wrong? thanks!

Answer 1

first Install the angular4-fusioncharts package using "npm install angular4-fusioncharts --save" next install "npm install fusioncharts --save"

import this in your main module

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 { }

In your 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"
            }
        ]
    }
   }
 }

In component.html

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