Page History

...

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

关键接口

插件图表接口

Code Block

title	IndependentChartProvider
collapse	true

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();

}

上述接口用户需要直接实现，里面具体需要实现的方法示例如下：

Code Block

title	DemoChartsPie implements IndependentChartProvider
collapse	true

package com.fr.plugins.democharts.pie;

import com.fr.chart.chartattr.Chart;
import com.fr.chart.fun.IndependentChartProvider;

public class DemoChartsPie implements IndependentChartProvider {

    public static pieChart[] charts = new pieChart[] {
            new pieChart(),
    };


    @Override
    public String getChartName() {
        return "用户自定义图表";
    }

    @Override
    public String[] getRequiredJS() {
        return new String[]{
                "/com/fr/plugins/democharts/common/web/echarts.bridge.js"
        };
    }
    @Override
    public String getWrapperName() {
        return "EChartsFactory";
    }

    @Override
    public Chart[] getChartTypes() {
        return charts;
    }

    @Override
    public String getChartImagePath() {
        return "com/fr/plugins/democharts/pie/images/pie256.png";
    }

    @Override
    public int currentAPILevel() {
        return 3;
    }
}

插件图表界面接口

Code Block

title	IndependentChartUIProvider
collapse	true

package com.fr.design.chart.fun;

/**
 * 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);

 ......(其他方法不用实现)
}

此接口用户不必实现，只需要继承实现了该接口的抽象类： AbstractIndependentChartUI4Custom 类即可，并实现相应方法，示例如下：

Code Block

title	DemoChartsPieUI extends AbstractIndependentChartUI4Custom
collapse	true

package com.fr.plugins.democharts.pie;

import com.fr.design.chart.fun.impl.AbstractIndependentChartUI4Custom;
import com.fr.design.gui.chart.ChartEditPaneProvider;


public class DemoChartsPieUI extends AbstractIndependentChartUI4Custom {
    @Override
    public ChartEditPaneProvider getChartConfigPane(String plotID) {
        return new ChartConfigPane();
    }

    @Override
    public int currentAPILevel() {
        return 3;
    }
}

关键抽象类

图表配置面板类

Code Block

title	ThirdChartEditPane
collapse	true

package com.fr.design.mainframe.chart;

import javax.swing.*;
import java.awt.*;

/**
 * Created by mengao on 2017/5/3.
 */
public abstract class ThirdChartEditPane extends ChartEditPane implements ChartEditPaneProvider, ThirdChartInterface {

protected abstract void populateBean(Object ob);

protected abstract void updateBean(Object ob);
    ......

}

用户的图表配置面板ChartConfigPane类需要继承此抽象类，并实现相应的方法，示例如下：

Code Block

title	ChartConfigPane extends ThirdChartEditPane
collapse	true

  package com.fr.plugins.democharts.pie;

import com.fr.design.mainframe.chart.ThirdChartEditPane;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
 * Created by mengao on 2017/4/26.
 */
public class ChartConfigPane extends ThirdChartEditPane {
    private pieChart pieChart;
    JPanel northJpane = new JPanel();
    JPanel centerJpane = new JPanel();
    JLabel nameJLable = new JLabel("请输入内容：");
    JTextField value = new JTextField();
    JButton updateButton = new JButton("确定");

    public ChartConfigPane() //构造方法
    {
        this.setLayout(new BorderLayout());
        northJpane.setLayout(new GridLayout(3, 2));
        northJpane.add(nameJLable);
        northJpane.add(value);
        this.add(northJpane, BorderLayout.NORTH);
        centerJpane.add(updateButton, BorderLayout.CENTER);
        this.add(centerJpane, BorderLayout.CENTER);
        this.setSize(200, 200);
        this.setVisible(true);
        updateButton.addActionListener(new ColorEventListener());
    }

    // 内部类ColorEventListener，实现ActionListener接口
    class ColorEventListener implements ActionListener {

        @Override
        public void actionPerformed(ActionEvent e) {
            updateBean(pieChart);
        }
    }

    @Override
    public void populateBean(Object ob) {
        if (ob instanceof pieChart) {
            pieChart = (pieChart) ob;
            value.setText(pieChart.getCustomData());
        }
    }

    @Override
    public void updateBean(Object ob) {
        if (ob instanceof pieChart) {
            pieChart pieChart = (pieChart) ob;
            pieChart.setCustomData(value.getText());
        }
    }
}

图表类

Code Block

title	ThirdChartEditPane
collapse	true

package com.fr.chart.chartattr;

import com.fr.base.chart.BaseChartGlyph;
import com.fr.base.chart.BaseChartPainter;
import com.fr.base.chart.ChangeConfigProvider;
import com.fr.base.chart.chartdata.ChartData;
import com.fr.chart.chartglyph.ChartGlyph;
import com.fr.chart.chartglyph.PlotGlyph;
import com.fr.stable.web.Repository;

import java.awt.*;
import java.awt.geom.RectangularShape;
import java.util.Iterator;
import java.util.Map;

/**
 * Created by mengao on 2017/5/3.
 * 用户使用第三方图表需要继承chart父类
 */
public abstract class ThirdChart extends Chart implements BaseChartGlyph {
public String getChartID()
public void writeXML(XMLPrintWriter xmlPrintWriter)
public void readXML(XMLableReader xmLableReader) 
public JSONObject toJSONObject(Repository repository) throws JSONException 
public Image toImage(int i, int i1, int i2)
public Image toImage(int i, int i1, int i2, CallbackEvent callbackEvent, ChartDataParam chartDataParam) 
 ......
}

用户的图表配置面板ChartConfig类需要继承此抽象类，并实现

Code Block

title	pieChart extends ThirdChart
collapse	true

package com.fr.plugins.democharts.pie;

import com.fr.base.chart.chartdata.CallbackEvent;
import com.fr.base.chart.chartdata.ChartDataParam;
import com.fr.chart.chartattr.ThirdChart;
import com.fr.json.JSONException;
import com.fr.json.JSONObject;
import com.fr.stable.web.Repository;
import com.fr.stable.xml.XMLPrintWriter;
import com.fr.stable.xml.XMLableReader;

import java.awt.*;


public class pieChart extends ThirdChart {
    private String customData= "demo";

    public String getCustomData() {
        return customData;
    }

    public void setCustomData(String customData) {
        this.customData = customData;
    }

    @Override
    public void writeXML(XMLPrintWriter xmlPrintWriter) {
        super.writeXML(xmlPrintWriter);

        xmlPrintWriter.startTAG("customChartDemo")
                .attr("custom", getCustomData())
                .end();
    }

    @Override
    public void readXML(XMLableReader xmLableReader) {
        super.readXML(xmLableReader);
        if (xmLableReader.isChildNode()) {
            String tagName = xmLableReader.getTagName();

            if(tagName.equals("customChartDemo")) {
                setCustomData(xmLableReader.getAttrAsString("custom","111"));
            }
        }
    }

    @Override
    public JSONObject toJSONObject(Repository repository) throws JSONException {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("customChartDemo",getCustomData());
        return jsonObject;
    }

    @Override
    public Image toImage(int i, int i1, int i2) {
        return null;
    }

    @Override
    public Image toImage(int i, int i1, int i2, CallbackEvent callbackEvent, ChartDataParam chartDataParam) {
        return null;
    }

    @Override
    public String getChartID() {
        return "DemoChartsPiePlot";
    }

}

关键配置

Code Block

<extra-core>
    <JavaScriptFileHandler class="com.fr.plugins.democharts.common.web.EChartsFileLoader"/>
</extra-core>
<extra-chart>
 <IndependentChartProvider class="com.fr.plugins.democharts.pie.DemoChartsPie"
 plotID="DemoChartsPiePlot"/>
</extra-chart>
<extra-chart-designer>
 <IndependentChartUIProvider class="com.fr.plugins.democharts.pie.DemoChartsPieUI"
 plotID="DemoChartsPiePlot"/>
</extra-chart-designer>

Page tree

Versions Compared

Old Version 29

New Version 30

Key

关键接口

插件图表接口

插件图表界面接口

关键抽象类

图表配置面板类

图表类

关键配置