javascript - 如何用angular 4创建融合图

Question

我为用户的CRUD操作创建了一个angular 4项目。现在我需要创建一个图表(融合图表)。所以我点击下面的链接

https://www.fusioncharts.com/dev/using-with-javascript-libraries/angular4/creating-charts-using-the-fusioncharts-angular4-component.html

但是出现了一些错误，

我使用

安装了融合图表插件

npm install fusioncharts angular4-fusioncharts --save

然后在 app.module.ts 中添加

 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.forRoot(FusionCharts, Charts, FintTheme) // in imports

然后在我的 userlist.ts 文件中添加

export class UserListComponent implements OnInit {

  private users:User[];
  height = 400;
  type = 'column2d';
  dataFormat = 'json';
  dataSource;

  constructor(private router:Router,
             private userService:UserService) {
   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"
    }
  ]
}

}

并且在 userlist.component.html 中

  <fusioncharts
        height="350"
        type="Column2D"
        dataFormat="JSON"
        [dataSource]="dataSource">
  </fusioncharts>

请帮我解决这个问题。

Answer 1

Hi Subho Please Look it .... 

- Package.json:  Install these libraries :
 1. npm install angular4-fusioncharts@1.0.0
 2. npm install fusioncharts@3.12.2

-index.html : add libraries : 

<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
 <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>

-add.module.ts :

//library imports for fusion charts
import * as FusionCharts from 'fusioncharts';
import { FusionChartsModule ,FusionChartsCoreService } from 'angular4-fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
FusionChartsModule.fcRoot(FusionCharts,Charts,FintTheme)

@NgModule({
  imports: [
    FusionChartsModule,
    CommonModule,
    FormsModule
  ] 
})
export class AppModule{ }

===================================
- app.component.html
<fusioncharts [id]="id" [width]="width" [height]="height" [type]="'column2d'" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>

==============================================
-app.component.ts

export class FusionChartsComp {
  id = 'chart1';
  width = 600;
  height = 400;
  type = 'angulargauge';
  dataFormat = 'json';
  dataSource;

 constructor() {
this.dataSource = {
      "chart": {
        "caption": "Harry's SuperMart-Test",
        "subCaption": "Top 5 stores in last month by revenue-Desc",
        "numberprefix": "$",
        "exportEnabled": "1",
        "exportMode": "client",
       // "theme": "carbon"

        // "caption": "U.S. Federal Employment Report 2014",
        // "subcaption": "Full-time employee's age distribution",
        // "xaxisname": "Age group",
        // "yaxisname": "Number of employees",
        "palette": "2",
        "rotatevalues": "1",
        "valuefontcolor": "043c62",
        "valuefontbold": "1",
        "placevaluesinside": "1",
        "animation": "1",
        // "plotspacepercent": "0",
        // "palettecolors": "#b2d9f9,#f7c018,#94bf13,#ff9049,#069191,#d74a4a,#914b91,#5c882b,#0c93d8",
        // "plottooltext": "$value Employees under $label (age group)",
        "theme": "zune"





      },
      "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"
        }


      ]
    }
  }

}