如何在Angular2下使用Wijmo FlexChart控件

时间:2024-10-12 19:00:20

1、创建新工程首先创建一个HTML Application with TypeScript新工程,如下图所示:

如何在Angular2下使用Wijmo FlexChart控件

2、删除文件选择工程中的app.css, app.ts和index.html文件,并删除。如图所示:

如何在Angular2下使用Wijmo FlexChart控件

3、更改工程配醅呓择锗置选择工程-属性。在配置对话框里,将TypeScriptBuild->Module system更改为CommonJS如图:

如何在Angular2下使用Wijmo FlexChart控件

4、更新首先选择工程的UploadProject

如何在Angular2下使用Wijmo FlexChart控件

5、接着选择工程的编辑工程,如下图(4-2):

如何在Angular2下使用Wijmo FlexChart控件

6、然后在文件中粘贴:<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

如何在Angular2下使用Wijmo FlexChart控件

7、点击右侧工程的Reload Project(如图4-2)中所示的列表。最后在弹出的对话框中点击Yes按钮。

8、添加Json文件在工程里添加新的Json文件,如图:

如何在Angular2下使用Wijmo FlexChart控件

9、并且把内容复制到新建的Json文件中。

如何在Angular2下使用Wijmo FlexChart控件

10、编辑页面打开default.html文件,开始编辑页面和添加控件。首先在<head></head>中添加引用。

如何在Angular2下使用Wijmo FlexChart控件

11、继续添加必要的wijmo引用,见下图一:添加css引用,见下图二:在使用js之前,需要添加如下的代码,见下图三:

如何在Angular2下使用Wijmo FlexChart控件如何在Angular2下使用Wijmo FlexChart控件如何在Angular2下使用Wijmo FlexChart控件

12、在工程中添加必要文件夹在工程中添加scripts/src/styles文件夹,并添加default.html文件。如图:

如何在Angular2下使用Wijmo FlexChart控件

13、打开工程所在文件夹,在script文件夹下添加2个文件夹,分别为:vendor和definitions。definitions文件夹下需要添加wijmo.d.ts和wijmo.grid.d.ts文件(文件可以在安装包路径中找到:\C1Wijmo-Eval_5.20163.234\Dist\controls)

如何在Angular2下使用Wijmo FlexChart控件

14、同样的,把wijmo.chart.min.js和wijmo.min.js添加到vendor文件夹下:

如何在Angular2下使用Wijmo FlexChart控件

15、再从安装包中(\C1Wijmo-Eval_5.20163.234\Dist\interop\angular2)文件夹下复制wijmo.angular2.min.js文件到vendor文件夹下:

如何在Angular2下使用Wijmo FlexChart控件

16、在node_modules文件夹创建wijmo文件夹,并把所有的angular2所需要的文件复制过去。

如何在Angular2下使用Wijmo FlexChart控件

17、最后将基本的styles文件(wijmo.css)复制到之前创建的styles文件夹中。

如何在Angular2下使用Wijmo FlexChart控件

18、包含文件返回到工程中,将上一步骤添加的文件通过Include In Project都包含到工程中。

如何在Angular2下使用Wijmo FlexChart控件

19、添加app文件在工程的src文件夹中添加新的TypeScript文件(起名app.ts)

如何在Angular2下使用Wijmo FlexChart控件

20、再添加一个HTML页面叫做app.html.然后再styles文件夹下添加app.cs.添加后结果如图:

如何在Angular2下使用Wijmo FlexChart控件

21、接着在app.ts文件中引入angular2文件。如果是要使用chart,那么也需要引入chart文件。

如何在Angular2下使用Wijmo FlexChart控件

22、还需要指定数据和基本话设置,如图:

如何在Angular2下使用Wijmo FlexChart控件

23、在上图中我们添加了一个Data Service叫做DataSvc,因此最后在src文件夹中添加一个名叫DataSvc的TypeScript文件。我们就可以在这个DataSvc文件中添加数据,如图。

如何在Angular2下使用Wijmo FlexChart控件

24、添加flexgrid控件最后配置View,在app.html里添加chart控件,代码参考图一:defult.html页面的代码见图二:

如何在Angular2下使用Wijmo FlexChart控件如何在Angular2下使用Wijmo FlexChart控件

25、最后的flexgrid展示在页面如图:

如何在Angular2下使用Wijmo FlexChart控件
© 2025 手抄报圈
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com