Ionic3 集成Wijom 5

ionic3中显示Wijom 5的饼状图。

1、官网下载试用版

    wijmo 5

2、npm安装

    下载成功后文件目录下有个NpmImages/wijmo-amd-min文件夹

    复制文件夹到项目中也好还是选择路径

    打开命令行工具   cd到项目路径 输入命令

    npm install --save ~文件路径/NpmImages/wijmo-amd-min

3、指定wijmo css

    将NpmImages/Dist/文件夹下的styles文件夹复制到

    项目src/assets/ 目录下。

    在html.index文件内指定css

    <link href="assets/styles/wijmo.css" rel="stylesheet" />

4、app.module.ts 中导入相关model

    import { WjChartModule } from 'wijmo/wijmo.angular2.chart';

    import { WjInputModule } from 'wijmo/wijmo.angular2.input';

    import { WjChartAnimationModule } from 'wijmo/wijmo.angular2.chart.animation';

    .......

     imports: [

        WjChartModule,

        WjChartAnimationModule,

        WjInputModule

      ],

    .......

5、在你的显示html里添加控件

    <ion-content padding>

            <wj-flex-pie [itemsSource]="itemsSource" [binding]="'value'" [bindingName]="'name'"></wj-flex-pie>

    </ion-content>

ionic serve 运行项目显示饼状图，成功。