开发步骤

demo地址：http://cloud.finedevelop.com:2015/users/zheng/repos/plugin-demochart/browse

前言：

6个步骤，7个文件，千行代码，so easy ！

要开发一款图表，首先要清楚所用前端库的一些基础接口，此图表类型的数据结构。

以echarts三维柱形图(一下简称DEMO)为例，开发之前要知道：

1.数据结构 

2.前台图表实例化api：echarts.init(dom)，配置项api:instance.setOption(option)。

前期准备：

• idea中新建一个模块。
• 在模块src下新建一个文件夹com.fr.plugin,之后在此文件夹下新建各种文件。原因：引擎默认只处理com.fr.plugin(9.0插件)或com.fr(8.0插件)包下的类。
• 将前端库所用js文件拷贝到com.fr.plugin下。
• 理解 XMLableReader和XMLPrintWriter

开发步骤：栗子是echarts三维柱形图

1. 第一步:
   定义图表所需数据结构xxxDataConfig，继承抽象类AbstractDataConfig。

   eg ：

   声明变量x、y、z（保存配置的xyz轴数据的字段名称）。

   实现抽象方法：readXML（模板读取）&& writeXML（模板写入）&& clone && equals && hashCode && dataSetFields（返回由声明的变量组成的数组，用于预览时取数据库取数）。

   其中，供开发者使用的readExtendedField&writeExtendedField方法的第二个参数是字段写入模板对应的key。

    展开原码

2. 第二步：
   定义前台图表对象xxxWrapper.js，指定图表库的初始图表接口。
   eg：demoWrapper

    展开原码

3. 第三步：

   定义后台图表对象xxxChart，继承抽象类AbstractChart。注意点：继承的时候别忘了指定泛型DemoDataConfig，即extends AbstractChart<DemoDataConfig>。

   eg:

   实现抽象方法：getChartID （图表标志ID）&& getChartName(图表名称)  &&  demoImagePath （图表选择界面图片路径） && addJSON （预览时生成的json对象，即图表展现所需配置项option && requiredJS （前端图表库js文件）&& wrapperName（前端图表对象，即第二步定义的对象名称）。

   其中，获取某字段对应的数据库数据使用方法dataConfig.getX().getValues()）。

    展开原码

4. 第四步：数据界面。
   数据集数据界面xxxTableDataPane，继承抽象类AbstractExtendedChartTableDataPane。注意点：extends AbstractExtendedChartTableDataPane<DemoDataConfig>

   eg：

   声明变量下拉框 x、y、z。
   实现抽象方法：fieldLabel  （标签名称）&& filedComboBoxes （下拉框数组）&& populate （属性设置到界面组件）&& update（组件值保存到图表属性中）。

    展开原码

   单元格配置界面xxxReportDataPane,继承抽象类AbstractExtendedChartReportDataPane。处理参考数据集数据配置界面，上栗子，不做累述。

    展开原码

5. 第五步：
   图表插件接口xxx，继承抽象类AbstractExtentChartProvider。
   eg：
   实现抽象方法：createChart （返回第三步的实例对象xxxChart，后台图表对象）。

    展开原码

   图表界面插件接口xxxUI，继承AbstractExtendedChartUIProvider。

   eg：实现接口方法：getTableDataSourcePane  && getReportDataSourcePane （返回第四步定义的两个数据配置界面的实例对象）&&getIconPath(表单工具栏拖拽图表小图标)。

    展开原码

6. 第六步：插件相关。

   新建plugin.xml文件，内容拷贝下面内容，需要更改的字段有：

   id:插件id。com.fr.plugin.demoChart 换成自己的，比如com.fr.plugin.xxxChart。

   name:插件名称。DEMO图表 换成自己的。

   function-recorder： 插件功能点记录。很重要！！！。class写第三步定义的类的路径即可。同时需要给第三步定义的类添加注解@FunctionRecorder，方法addJSON添加注解@ExecuteFunctionRecord

   IndependentChartProvider：图表接口。class写第五步中的xxx路径。plotID为 第三步中图表对象实现的抽象方法getChartID返回的结果。

   IndependentChartUIProvider：图表UI接口。class写第五步中的xxxUI路径。plotID为 第三步中图表对象实现的抽象方法getChartID返回的结果。

    展开原码 展开原码

   
   

   简单的开发到此结束，如果想要联动or超链or导出or公式等，请参考开发进阶