【仅供内部供应商使用，不提供对外解答和培训】
Page History
| Note |
|---|
| 请注意，阅读此文档需要您拥有基础的JAVA和JS知识，您有必要亲自尝试使用FineReport的图表功能，如果您在阅读中出现疑问，可以比对零基础文档。 |
图表插件介绍
图表插件是用于丰富帆软的图表类型，旨在帮助用户更好地做数据可视化展现。开发者需要通过帆软开放的接口，参考下面的demo和文档来制作插件。
安装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
|
1.custompie
此目录下存放第三方图表插件接口调用类，需要实现相应的方法。
2.images
此目录下存放插件的相关图片，供报表表单页面展示。
3.web
此目录下存放前台js，供图表预览时展示。
4.build.xml
该文件用于插件包构建，请参考文档。
5.plugin.xml
该文件包含插件的接入点描述信息，请参考文档。
6.plugins-calendarchart.iml
IEDA项目的配置。
接口介绍
接口详细介绍，请参阅文档。
我的demo
1.demo开发概述
1） 开发过程：一共三个部分
数据抽取部分：设计器右侧的图表属性表-数据部分
...
2） 按照自己开发的类修改plugin.xml以及build.xml，请上面提到的文档。
2.下面详细讲一下开发过程吧
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){
}
};
|
国际化
为了减少代码中的中文和硬编码，我们可以对其进行国际化。
继承接口AbstractLocaleFinder，实现find()方法，返回国际化文件目录
| 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图
...
Overview
Content Tools