Angular2创建控件WijmoFlexChart工程教程.pdfVIP

Angular2 创建控件 Wijmo FlexChart 工程教程 本文来介绍如何在 Angular2 下使用 FlexGrid 控件。 功能介绍 这个轻量的 Angular 2 图表控件，包含所有的关键功能以及你需要的类似 Excel 的图表类型 使用 Angular2 创建 FlexChart 工程 1.创建新工程 首先创建一个 HTML Application with TypeScript 新工程，如下图所示： 2.删除文件 选择工程中的 app.css, app.ts 和 index.html 文件，并删除。如图所示： 3.更改工程配置 选择工程-属性。在配置对话框里，将 TypeScriptBuild-Module system 更改 为 CommonJS 如图： 4.更新 首先选择工程的 UploadProject 接着选择工程的编辑工程，如下图（4-2 ）： 然后在文件中粘贴： TypeScriptExperimentalDecoratorstrue/TypeScriptExperimentalDecorators 点击右侧工程的 Reload Project （如图4-2 ）中所示的列表。 最后在弹出的对话框中点击 Yes 按钮。 5.添加 Json 文件 在工程里添加新的 Json 文件，如图： 并且把内容复制到新建的 Json 文件中。 6.编辑页面 打开 default.html 文件，开始编辑页面和添加控件。 首先在head/head中添加引用。 继续添加必要的 wijmo 引用： !-- Wijmo -- script src=scripts/vendor/wijmo.min.js type=text/javascript /script script src=scripts/vendor/wijmo.chart.min.js type=text/java script/script !-- Wijmo Angular2 -- script src=scripts/vendor/wijmo.angular2.min.js type=text/j avascript/script 添加 css 引用： link href=styles/wijmo.css rel=stylesheet/ link href=styles/app.css rel=stylesheet/ 在使用js 之前，需要添加如下的代码： 7.在工程中添加必要文件夹 在工程中添加 scripts/src/styles 文件夹，并添加 default.html 文件。 如图： 打开工程所在文件夹，在 script 文件夹下添加 2 个文件夹，分别为：vendor 和 definitions definitions 文件夹下需要添加 wijmo.d.ts 和 wijmo.grid.d.ts 文件（文件可 以在安装包路径中找到：\C1Wijmo-Eval_5.20163.234\Dist\controls ） 同样的，把wijmo.chart.min.js 和 wijmo.min.js 添加到 vendor 文件夹下： 再从安装包中（\C1Wijmo-Eval_5.20163.234\ Dist\interop\angular2 ）文件夹 下复制 wijmo.angular2.min.js 文件到 vendor 文件夹下： 在 node_modules 文件夹创建 wijmo 文件夹，并把所有的 angular2 所需要的 文件复制过去。 最后将基本的 styles 文件(wijmo.css)复制到之前创建的 styles 文件夹中。 8.包含文件 返回到工程中，将上一步骤添加的文件通过 Include In Project 都包含到工程中。 9.添加 app 文件 在工程的 src 文件夹中添加新的 TypeScript 文件（起名 app.ts) 再添加一个 HTML 页面叫做 app.html. 然后再 styles 文件夹下添加 app.cs. 添加后结果如图： 接着在 app.ts 文件中引入 angular2 文件。 如果是要使用 chart ，那么也需要引入chart 文件。 还需要指定数据和基本话设置，如图： 在上图中我们添加了一个 Data Service 叫做 DataSvc ，因此最后在src 文件夹 中添加一个名叫 DataSvc 的TypeScript 文件。 我们就可以在这个 DataSvc 文件中添加数据，如图。 10.添加 flexgrid 控件 最后配置 V