如何使用角度 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

您需要在@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
      ]
    })

另外，你不必在 index.html 中导入 js 文件，而是将它们放在 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"
            ]
          },
    ...

Answer 2

两个都需要安装：

npm install angular4-fusioncharts --save

和

npm install fusioncharts --save

根据他们的npm页面这里enter link description here

还要检查我的 app.module，因为我觉得它和你的不一样：

但是，它仍然没用，因为它只能可视化硬编码的数据，因为它只能从构造函数可视化中绘制出来。

Answer 3

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 4

您没有正确导入某些内容。

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