Javascript 如何使用angular 4创建融合图

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

但是一些错误正在到来，

我安装了fusion图表插件，使用

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>

---

请帮助我解决此问题。

您没有正确导入某些内容

也许还可以在你的userlist.ts文件中添加导入内容

Hi Subho请查看。。。。
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"
        }


      ]
    }
  }

}

-Package.json：安装以下库：
1.npm安装角度4-fusioncharts@1.0.0
2.npm安装fusioncharts@3.12.2
-index.html：添加库：
-添加.module.ts：
//fusion图表的库导入
从“FusionCharts”导入*作为FusionCharts；
从'angular4 fusioncharts'导入{FusionChartsModule，FusionChartsCoreService}；
从“fusioncharts/fusioncharts.Charts”导入*作为图表；
从“fusioncharts/themes/fusioncharts.theme.fint”导入*作为FintTheme；
FusionChartsModule.fcRoot（FusionCharts、图表、FintTheme）
@NGD模块({
进口：[
FusionChartsModule，
公共模块，
FormsModule
] 
})
导出类AppModule{}
===================================
-app.component.html
==============================================
-app.component.ts
导出类FusionChartsComp{
id='chart1'；
宽度=600；
高度=400；
类型=‘角度规’；
dataFormat='json'；
数据源；
构造函数（）{
this.dataSource={
“图表”：{
“说明”：“哈利的超级艺术测试”，
“子选项”：“上个月收入排名前五的门店”，
“numberprefix”：“$”，
“exportEnabled”：“1”，
“exportMode”：“客户端”，
//“主题”：“碳”
//“说明”：“2014年美国联邦就业报告”，
//“子选项”：“全职员工的年龄分布”，
//“xaxisname”：“年龄组”，
//“yaxisname”：“员工人数”，
“调色板”：“2”，
“旋转值”：“1”，
“valuefontcolor”：“043c62”，
“valuefontbold”：“1”，
“侧边位置值”：“1”，
“动画”：“1”，
//“plotspacepercent”：“0”，
//“调色板颜色”：“b2d9f9、f7c018、94bf13、ff9049、069191、d74a4a、914b91、5c882b、0c93d8”，
//“plottooltext:“$标签下的$value员工（年龄组）”，
“主题”：“zune”
},
“数据”：[
{
“标签”：“贝克斯菲尔德中心”，
“价值”：“880000”
},
{
“标签”：“花园沟港”，
“价值”：“730000”
},
{
“标签”：“洛杉矶托潘加”，
“价值”：“590000”
},
{
“标签”：“康普顿大牧场”，
“价值”：“520000”
},
{
“标签”：“Daly City Serramonte”，
“值”：“330000”
}
]
}
}
}

您需要同时安装：

npm安装角度4 fusioncharts——保存

及

npm安装fusioncharts--保存

根据他们的

npm

页面

还可以查看我的app.module，因为我觉得它与您的不同：

---

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

您需要在@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"
            ]
          },
    ...

---

谢谢你。这是一个救命稻草。当前示例（截至2018年4月12日）在Fusion Charts网站和Ionic 4上不起作用。这让我朝着正确的方向前进。