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

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

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. }