前言

FineReport除了内置的图表、新特性图表插件外，还提供了第三方图表开发的API，方便进行个性化、第三方的图表开发。但是第三方图表API接口过于复杂，用户很难快速的实现并使用自己想使用的第三方新图表。

解决方法

在原有的图表接口基础之上，对接口进行了简化和修改，让用户可以快速的写出第三方图表插件并使用。

关键接口

（1）IndependentChartProvider

 

package com.fr.chart.fun;

import com.fr.chart.chartattr.Chart;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 15/4/21.
 * 图表接口
 */
public interface IndependentChartProvider extends Level {

 String XML_TAG = "IndependentChartProvider";

 int CURRENT_API_LEVEL = 3;

 /**
 * 图表的国际化的名字的key
 *
 * @return 图表国际化的名字的key
 */
 String getChartName();

 /**
 * 该种图表所有的图表类型，比如柱形图就有堆积柱形图，百分比堆积柱形图等等
 *
 * @return 所有的图表类型
 */
 Chart[] getChartTypes();

 /**
 * 图表在web端展现时需要的JS文件
 *
 * @return JS文件数组
 */
 String[] getRequiredJS();

 /**
 * JS对象名，该对象一般是一个函数，执行后会在给定的dom中绘制图表
 *
 * @return JS对象名
 */
 String getWrapperName();

 /**
 * 定义在设计器里展现的图的路径
 *
 * @return 图的路径
 */
 String getChartImagePath();

}

 

 

（2）IndependentChartUIProvider
此接口用户不必实现 ，只需要继承 AbstractIndependentChartUI4Custom 类，并实现如下方法即可

 



package com.fr.design.chart.fun;

import com.fr.chart.chartattr.Plot;
import com.fr.design.beans.BasicBeanPane;
import com.fr.design.condition.ConditionAttributesPane;
import com.fr.design.gui.chart.ChartEditPaneProvider;
import com.fr.design.gui.frpane.AttributeChangeListener;
import com.fr.design.mainframe.chart.AbstractChartAttrPane;
import com.fr.design.mainframe.chart.gui.ChartDataPane;
import com.fr.design.mainframe.chart.gui.ChartStylePane;
import com.fr.design.mainframe.chart.gui.data.report.AbstractReportDataContentPane;
import com.fr.design.mainframe.chart.gui.data.table.AbstractTableDataContentPane;
import com.fr.design.mainframe.chart.gui.type.AbstractChartTypePane;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 14/12/29.
 *
 * @since 8.0
 * 自定义图表类型设设计界面接口
 */
public interface IndependentChartUIProvider extends Level {

 String XML_TAG = "IndependentChartUIProvider";

 int CURRENT_API_LEVEL = 3;

/**
 * 当前接口的API等级,用于判断是否需要升级插件
 *
 * @return API等级
 */
int currentAPILevel();
 /**
 * 图表配置面板
 *
 * @return图表配置面板
 */
 ChartEditPaneProvider getChartConfigPane(String plotID);

}

关键抽象类

（1）IndependentChartProvider

 

package com.fr.chart.fun;

import com.fr.chart.chartattr.Chart;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 15/4/21.
 * 图表接口
 */
public interface IndependentChartProvider extends Level {

 String XML_TAG = "IndependentChartProvider";

 int CURRENT_API_LEVEL = 3;

 /**
 * 图表的国际化的名字的key
 *
 * @return 图表国际化的名字的key
 */
 String getChartName();

 /**
 * 该种图表所有的图表类型，比如柱形图就有堆积柱形图，百分比堆积柱形图等等
 *
 * @return 所有的图表类型
 */
 Chart[] getChartTypes();

 /**
 * 图表在web端展现时需要的JS文件
 *
 * @return JS文件数组
 */
 String[] getRequiredJS();

 /**
 * JS对象名，该对象一般是一个函数，执行后会在给定的dom中绘制图表
 *
 * @return JS对象名
 */
 String getWrapperName();

 /**
 * 定义在设计器里展现的图的路径
 *
 * @return 图的路径
 */
 String getChartImagePath();

}

 

 

（2）IndependentChartUIProvider
此接口用户不必实现 ，只需要继承 AbstractIndependentChartUI4Custom 类，并实现如下方法即可

 



package com.fr.design.chart.fun;

import com.fr.chart.chartattr.Plot;
import com.fr.design.beans.BasicBeanPane;
import com.fr.design.condition.ConditionAttributesPane;
import com.fr.design.gui.chart.ChartEditPaneProvider;
import com.fr.design.gui.frpane.AttributeChangeListener;
import com.fr.design.mainframe.chart.AbstractChartAttrPane;
import com.fr.design.mainframe.chart.gui.ChartDataPane;
import com.fr.design.mainframe.chart.gui.ChartStylePane;
import com.fr.design.mainframe.chart.gui.data.report.AbstractReportDataContentPane;
import com.fr.design.mainframe.chart.gui.data.table.AbstractTableDataContentPane;
import com.fr.design.mainframe.chart.gui.type.AbstractChartTypePane;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 14/12/29.
 *
 * @since 8.0
 * 自定义图表类型设设计界面接口
 */
public interface IndependentChartUIProvider extends Level {

 String XML_TAG = "IndependentChartUIProvider";

 int CURRENT_API_LEVEL = 3;

/**
 * 当前接口的API等级,用于判断是否需要升级插件
 *
 * @return API等级
 */
int currentAPILevel();
 /**
 * 图表配置面板
 *
 * @return图表配置面板
 */
 ChartEditPaneProvider getChartConfigPane(String plotID);

}

 

 

 

实际示例

绿色主题

 

package com.fr.solution.theme.green;
 
import com.fr.fs.fun.impl.AbstractThemeVariousProvider;
 
public class ThemeGreen extends AbstractThemeVariousProvider {
 
    @Override
    public String name() {
        return "AcrossGreen";
    }
 
    @Override
    public String text() {
        return "横向目录";
    }
 
    @Override
    public String coverPath() {
        return "/com/fr/solution/theme/green/files/cover.png";
    }
 
    @Override
    public String scriptPath() {
        return "/com/fr/solution/theme/green/files/theme.js";
    }
 
    @Override
    public String stylePath() {
        return "/com/fr/solution/theme/green/files/style.css";
    }
}

 

关键配置xml

 

<extra-platform>
    <ThemeVariousProvider class="com.fr.solution.theme.green.ThemeGreen"/>
</extra-platform>

 

可以看到只要实现了接口的几个方法，并按照平台主题的API接口开发好主题，就可以开发出来一个主题插件了。开发好的主题插件可以上传到应用中心方便共享给所有的用户。

效果图

安装插件后，插件管理中心可以看到该插件

 

 

之后决策平台的管理员可以在平台的外观设置中选择该主题，安装后切换主题的位置

之后决策平台的效果就是下图这样了

 

源码

如果你希望查看完整的示例源码，可以看这里：http://www.finedevelop.com:2015/projects/PB/repos/plugin-theme-green