在报表开发平台中集成第三方图表库

1. 描述

很多人不知道该如何在报表开发平台中集成第三方图表库，由此可能会影响实际的工作效率，根据自己平时的工作经验，在该文中详细讲解一下集成第三方图表库的步骤。这里以集成echarts为例看下在FineReport中集成第三方图表库的步骤。

2. 集成需要实现两个接口ChartTypeInterfaceProvider和ChartTypeProvider集成需要的两个接口

ChartTypeInterfaceProvider是设计里用到的界面，有两个界面是必要的，一个是类型选择的界面，一个是属性配置的界面。类型选择的界面代码如下。

1. package com.fr.plugin.chart;  

2. import com.fr.chart.chartattr.Chart;  

3. import com.fr.design.mainframe.chart.gui.type.UserDefinedChartTypePane;  

4. /**

5.  * Created by eason on 15/5/22.

6.  */  

7. public class CustomBarTypePane extends UserDefinedChartTypePane {  

8.     //弹出框的标题  

9.     public String title4PopupWindow(){  

10.         return "自定义柱形图";  

11.     }  

12.     //该种图表类型的标识符，需要让界面和后面定义的类型关联起来  

13.     protected String getCustomChartID(){  

14.         return "自定义柱形图";  

15.     }  

16.     public void updateBean(Chart chart) {  

17.         if(chart != null){  

18.             chart.setPlot(null);  

19.         }  

20.     }  

21. }  

属性配置的界面代码如下，这里我们采用简单的实现方式，把所有的属性都写到了一个TextField里，如果想要实现别的更复杂的配置界面，可以参考echarts的文档来设计界面。

1. package com.fr.plugin.chart; /**

2.  * Created by eason on 15/5/22.

3.  */  

4. import com.fr.chart.chartattr.ChartCollection;  

5. import com.fr.chart.chartattr.Chart;  

6. import com.fr.design.gui.itextfield.UITextField;  

7. import com.fr.design.mainframe.chart.AbstractChartAttrPane;  

8. import com.fr.general.FRLogger;  

9. import com.fr.json.JSONException;  

10. import com.fr.json.JSONObject;  

11. import javax.swing.*;  

12. import java.awt.*;  

13. public class CustomBarAttrPane extends AbstractChartAttrPane{  

14.     private UITextField textField;  

15.     public CustomBarAttrPane(){  

16.         this.initAll();  

17.         this.initAllListeners();  

18.     }  

19.     public void populate(ChartCollection collection){  

20.         if(collection != null && collection.getSelectedChart() != null){  

21.             Chart chart = collection.getSelectedChart();  

22.             try{  

23.                 textField.setText(chart.getConfig("allOptions").toString());  

24.             }catch (JSONException ex){  

25.                 FRLogger.getLogger().error(ex.getMessage());  

26.             }  

27.         }  

28.     }  

29.     public void update(ChartCollection collection) {  

30.         if(collection != null && collection.getSelectedChart() != null){  

31.             Chart chart = collection.getSelectedChart();  

32.             try{  

33.                 chart.addConfig("allOptions", new JSONObject(textField.getText()));  

34.             }catch (JSONException ex){  

35.                 FRLogger.getLogger().error(ex.getMessage());  

36.             }  

37.         }  

38.     }  

39.     public String getIconPath() {  

40.         return "com/fr/design/images/chart/InterAttr.png";  

41.     }  

42.     protected JPanel createContentPane() {  

43.         JPanel pane = new JPanel(new BorderLayout());  

44.         textField = new UITextField();  

45.         pane.add(textField, BorderLayout.CENTER);  

46.         return pane;  

47.     }  

48.     /**

49.      * 弹出界面的标题

50.      * @return 弹出界面的标题

51.      */  

52.     public String title4PopupWindow(){  

53.         return "标题";  

54.     }  

55. }  

最终我们界面的接口定义可以写成如下， isUseDefaultPane方法都return false就可以了。

1. package com.fr.plugin.chart; /**

2.  * Created by eason on 15/5/22.

3.  */  

4. import com.fr.design.chart.fun.impl.AbstractChartTypeInterface;  

5. import com.fr.design.gui.frpane.AttributeChangeListener;  

6. import com.fr.design.mainframe.chart.AbstractChartAttrPane;  

7. import com.fr.design.mainframe.chart.gui.type.AbstractChartTypePane;  

8. public class CustomBarChartInterface extends AbstractChartTypeInterface {  

9.     public static final String XML_TAG = "ChartTypeInterfaceProvider";  

10.     public AbstractChartTypePane getPlotTypePane(){  

11.         return new CustomBarTypePane();  

12.     }  

13.     public AbstractChartAttrPane[] getAttrPaneArray(AttributeChangeListener listener){  

14.         return new AbstractChartAttrPane[]{new CustomBarAttrPane()};  

15.     }  

16.     public boolean isUseDefaultPane(){  

17.         return false;  

18.     }  

19.     public String getIconPath(){  

20.         return "com/fr/plugin/chart/images/echarts.png";  

21.     }  

22. }  

3. 实现类型的接口

1. package com.fr.plugin.chart; /**

2.  * Created by eason on 15/5/22.

3.  */  

4. import com.fr.chart.chartattr.Chart;  

5. import com.fr.chart.fun.impl.AbstractChartTypeProvider;  

6. public class CustomBarChartType extends AbstractChartTypeProvider {  

7.     public String getChartName(){  

8.         return "echarts";  

9.     }  

10.     public String getChartUseName(){  

11.         return "echarts柱形图";  

12.     }  

13.     public Chart[] getChartTypes(){  

14.         Chart[] charts = new Chart[1];  

15.         Chart barChart = new Chart();  

16.         barChart.setWrapperName(getWrapperName());  

17.         barChart.setCustomChartID("自定义柱形图");  

18.         charts[0] = barChart;  

19.         barChart.setRequiredJs(getRequiredJS());  

20.         barChart.setChartImagePath(this.getChartImagePath());  

21.         return charts;  

22.     }  

23.     public String[] getRequiredJS(){  

24.         return new String[]{  

25.                 "/com/fr/web/core/js/echarts-all.js",  

26.                 "/com/fr/web/core/js/EchartsWrapper.js"  

27.         };  

28.     }  

29.     @Override  

30.     public String getChartImagePath() {  

31.         return "com/fr/plugin/chart/images/echarts_display.png";  

32.     }  

33.     public String getWrapperName(){  

34.         return "EchartsWrapper";  

35.     }  

36. }  

这里需要注意的是setCustomChartID方法需要和前面界面中的名字一致， setWrapperName是EchartsWrapper.js定义的function的名字。EchartsWrapper.js的内容如下：

1. /**

2.  * Created by eason on 15/5/21.

3.  */  

4. EchartsWrapper = function(options, dom){  

5.     var myChart = echarts.init(dom[0]);  

6.     myChart.setOption(options.jsonOptions.allOptions);  

7. }