【仅供内部供应商使用,不提供对外解答和培训】
Note |
---|
请注意,阅读此文档需要您拥有基础的JAVA和JS知识,您有必要亲自尝试使用FineReport的图表功能,如果您在阅读中出现疑问,可以比对零基础文档。 |
图表插件是用于丰富帆软的图表类型,旨在帮助用户更好地做数据可视化展现。开发者需要通过帆软开放的接口,参考下面的demo和文档来制作插件。
我们建议您在上手开发插件之前,先体验一下插件使用的具体情形,搭建环境的具体步骤在其他文档中写的很具体,这里不去赘述。
Code Block |
---|
plugins-calendarchart --src --com.fr.plugins.calendarchart --custompie --ChartConfigPane.java --DemoChartsPie.java --demoChartsPieUI.java --PieChart.java --images --pie256.png --web --echarts.bridge.js --echarts.loader.js --echarts.min.js --EChartsFileLoader.java --build.xml --plugin.xml --plugins-calendarchart.iml |
此目录下存放第三方图表插件接口调用类,需要实现相应的方法。
此目录下存放插件的相关图片,供报表表单页面展示。
此目录下存放前台js,供图表预览时展示。
该文件用于插件包构建,请参考文档。
该文件包含插件的接入点描述信息,请参考文档。
IEDA项目的配置。
接口详细介绍,请参阅文档。
1) 开发过程:一共三个部分
数据抽取部分:设计器右侧的图表属性表-数据部分
...
2) 按照自己开发的类修改plugin.xml以及build.xml,请上面提到的文档。
1) 默认数据集和图表属性+ js,除了js,我们需要继承以下三个类,并实现里面具体的方法:
...
Code Block | ||
---|---|---|
| ||
EChartsFactory.prototype = { constructor : EChartsFactory, inits : function() { //后台传过来的数据或者样式都在 this.options.chartAttr中 var ct = this.options.chartAttr; //新建一个Echarts图表myChart var myChart = echarts.init(this.$dom[0]); //获取后台传过来的data,并解析 var data = ct.data; var max = 0; for (var i = 0; i < data.length; i += 1) { if (parseInt(max) < parseInt(data[i][1])) { max = data[i][1]; } } var year = echarts.number.parseDate(data[0][0]).getFullYear(); max = max / 20; //获取后台传过来的title var title = ct.title; //设置图表的参数title、tooltip、legend等 option = { } this.newCharts.setOption(ct); }, resize : function() { this.newCharts.resize(); }, refresh:function() { }, refreshData:function(options){ }, //数据监控的刷新方式 setData:function(options, aimation){ } }; |
为了减少代码中的中文和硬编码,我们可以对其进行国际化。
Code Block | ||
---|---|---|
| ||
import com.fr.stable.fun.impl.AbstractLocaleFinder; public class youclassname extends AbstractLocaleFinder { @Override public int currentAPILevel() { return CURRENT_LEVEL; } @Override public String find() { return "com/fr/plugin-XXX/locale/XXX"; } } |
在com/fr/plugin-XXX/locale/目录下,添加XXX.properties文件。
Plugin-XXX=XX图
Plugin-XXX_title=标题
….
在plugin.xml中添加youclassname,如下
Code Block | ||
---|---|---|
| ||
<extra-core> <LocaleFinder class="com.fr.plugin.xxx.youclassname"/> </extra-core> |
1)JAVA中用Inter.getLocText("Plugin-XXX")替换XX图
...