Question

我为用户的CRUD操作创建了一个角度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"
        }


      ]
    }
  }

}

Answer 2

您没有正确导入内容。

也许在userlist.ts文件中添加导入

Answer 3

你需要同时安装：

npm install fusioncharts --save

和

npm

根据=INDEX($B$1:$B$10,MATCH(C1,--LEFT($A$1:$A$10,FIND("-",$A$1:$A$10)-1),1))页面enter link description here

还要检查我的app.module，因为我觉得它与你的不同：

然而，它仍然无用，因为它只能显示硬编码数据，只要它只能从构造函数可视化中提取它。

Answer 4

您需要在@NgModule中导入FusionChartsModule。另外，请勿使用FusionChartsModule.forRoot，而应使用FusionChartsModule.fcRoot。



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

    // Pass the fusioncharts library and chart modules
    FusionChartsModule.fcRoot(FusionCharts, Charts, PowerCharts, FintTheme);

    @NgModule({
      imports: [
        ...
        FusionChartsModule
      ]
    })

此外，您不必将js文件导入index.html，而是将它们放在angular.json配置中。


    ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/fusioncharts/fusioncharts.js",
              "src/assets/js/fusioncharts/fusioncharts.charts.js",
              "src/assets/js/fusioncharts/fusioncharts.powercharts.js",
              "src/assets/js/fusioncharts/themes/fusioncharts.theme.fint.js"
            ]
          },
    ...

如何用角度4创建融合图表

4 个答案: