第三方图表实现自动刷新

前言

FineReport除了内置的图表外，还提供了第三方图表开发的API，方便进行个性化、第三方的图表开发。但是有些用户想使用内置图表一样的自动刷新功能，却不知如何实现。下面给出第三方图表如何实现图表自动刷新。

前提

已经开发好，可以使用的第三方图表。（备注：第三方图表插件开发介绍：看完零基础文档之后看我）

下面介绍下在原有的第三方图表的基础上，添加监控刷新功能：

后台部分

添加自动刷新时间的设置，保存到模板中

（1）面板中添加设置自动刷新时间的组件，并将组件设置的值保存在chart类中

在面板中添加自动刷新时间组件

public abstract class ChartConfigPane <T extends Charts> extends ChartsConfigPane<T> {
    private JPanel northJpane = new JPanel();
    private JPanel centerJpane = new JPanel();
    private UILabel nameUILabel = new UILabel("图表名：");
    private UILabel demoUILabel = new UILabel("自定义组件：");
    private UILabel refreshTimeUILabel = new UILabel("刷新时间：");
    /**
     * 用户可以使用设计器封装好组件和自定义组件
     * 封装好组件直接使用
     * 自定义组件需要自定义，并实现UIObserver接口和相应方法
     * 建议用户都使用设计器提供的封装好组件（封装好的组件基本都是UI***）
     */
    //使用设计器中封装好的UI组件
    protected UITextField value = new UITextField();
    protected UISpinner autoRefreshTime = new UISpinner(0, Integer.MAX_VALUE, 1, 0);
    //用户自定义组件
    protected CustomTextfield customTextArea = new CustomTextfield();
    protected ChartCollection chartCollection;
    public ChartConfigPane() //构造方法
    {
        this.setLayout(new BorderLayout());
        northJpane.setLayout(new GridLayout(4, 1, 10,10));
        northJpane.setLayout(new GridLayout(6, 1, 10,10));
        northJpane.add(nameUILabel);
        northJpane.add(value);
        northJpane.add(demoUILabel);
        northJpane.add(customTextArea);
        northJpane.add(refreshTimeUILabel);
        northJpane.add(autoRefreshTime);
        northJpane.setBorder(BorderFactory.createEmptyBorder(10,15,10,15));
        this.add(northJpane, BorderLayout.NORTH);
        this.add(centerJpane, BorderLayout.CENTER);
        this.setSize(200, 200);
        this.setVisible(true);
        //初始化所有组件后必须调用此方法为他们添加监听
        initAllListeners();
    }
 
  @Override
    protected void populate(ChartCollection collection, PieChart selectedChart) {
        this.chartCollection=collection;
        value.setText(selectedChart.getChartTitle());
        customTextArea.setText(selectedChart.getChartDescribe());
        autoRefreshTime.setValue(selectedChart.getRefreshTime());
    }
    @Override
    protected void update(ChartCollection collection, PieChart selectedChart) {
        selectedChart.setChartTitle(value.getText());
        selectedChart.setChartDescribe(customTextArea.getText());
        selectedChart.setRefreshTime((int) autoRefreshTime.getValue());
    }
}

（2）将chart类的的自动刷新时间保存到模版中，预览时，传到前台去

chart类保存自动刷新时间到模版中

public class PieChart extends Charts<NormalChartData> {
    private String chartTitle = "公共数据配置面板demo";
    private String chartDescribe = "描述";
    private int refreshTime = 0;
    private static final NumberFormat format = new DecimalFormat("##%");

    public String getChartTitle() {
        return chartTitle;
    }
    public void setChartTitle(String chartTitle) {
        this.chartTitle = chartTitle;
    }
    public String getChartDescribe() {
        return chartDescribe;
    }
    public void setChartDescribe(String chartDescribe) {
        this.chartDescribe = chartDescribe;
    }
    @Override
    public int getRefreshTime() {
        return refreshTime;
    }
    public void setRefreshTime(int refreshTime) {
        this.refreshTime = refreshTime;
    }
    /**
     * 比较和Object是否相等
     * @param ob 用 于比较的Object
     * @return 一个boolean值
     * 备注：不相等时，触发激活保存按钮
     */
    public boolean equals(Object ob) {
        return ob instanceof Chart && super.equals(ob)
                && ComparatorUtils.equals(((PieChart) ob).getChartTitle(), chartTitle)
                && ComparatorUtils.equals(((PieChart) ob).getChartDescribe(), chartDescribe)
                && ComparatorUtils.equals(((PieChart) ob).getRefreshTime(), refreshTime)
                ;
    }
    @Override
    public void writeXML(XMLPrintWriter xmlPrintWriter) {
        super.writeXML(xmlPrintWriter);
        xmlPrintWriter.startTAG("customChartDemo")
                .attr("chartTitle", getChartTitle())
                .attr("chartDescribe", getChartDescribe())
                .attr("refreshTime", getRefreshTime())
                .end();
    }
    @Override
    public void readXML(XMLableReader xmLableReader) {
        super.readXML(xmLableReader);
        if (xmLableReader.isChildNode()) {
            String tagName = xmLableReader.getTagName();
            if (tagName.equals("customChartDemo")) {
                setChartTitle(xmLableReader.getAttrAsString("chartTitle", "标题"));
                setChartDescribe(xmLableReader.getAttrAsString("chartDescribe", "描述"));
                setRefreshTime(xmLableReader.getAttrAsInt("refreshTime", 0));
            }
        }
    }
    /**
     * 读出字符串，然后传到前台
     * 注意：需要获取数据配置中的数据，使用getChartData()方法
     */
    @Override
    //tojson的时候注意用getChartData()方法获取当前数据集，然后自主拼接成json
    public JSONObject toJSON(Repository repo) throws JSONException {
        JSONObject jsonObject = JSONObject.create();
        jsonObject.put("series", seriesJSONArray())
                  .put("title", JSONObject.create().put("text", getChartTitle()));
        jsonObject.put("refreshTime", refreshTime);
        return jsonObject;
    }
    private JSONArray seriesJSONArray() throws JSONException {
        NormalChartData normalChartData = getChartData();
        int seriesLen = normalChartData.getSeriesCount();
        String radius = format.format(1.0 / seriesLen);
        //对系列循环
        JSONArray series = JSONArray.create();
        for (int index = 0; index < seriesLen; index++) {
            JSONObject wrapper = JSONObject.create()
                    .put("type", "pie")
                    .put("data", pointJSONArray(index)) //将每个系列值给data
                    .put("name", normalChartData.getSeries_array()[index].toString());//将系列名给系列
            if (seriesLen > 1) {
                JSONArray center = JSONArray.create()
                        .put(format.format((float) index / (seriesLen + 1) + 0.20))
                        .put("55%");
                wrapper.put("radius", radius)
                        .put("center", center);
            }
            series.put(wrapper);
        }
        return series;
    }
    private JSONArray pointJSONArray(int index) throws JSONException {
        NormalChartData normalChartData = getChartData();
        int categoriesLen = normalChartData.getCategoryLabelCount();
        JSONArray point = JSONArray.create();
        for (int i = 0; i < categoriesLen; i++) {
            JSONObject item = JSONObject.create();
            //将分类名给name
            String name = normalChartData.getCategory_array()[i].toString();
            item.put("name", name);
            if (normalChartData.getSeries_value_2D().length > 0) {
                //将点的值给data
                item.put("value", normalChartData.getSeries_value_2D()[index][i]);
            }
            point.put(item);
        }
        return point;
    }
    @Override
    public String getChartID() {
        return "ChartsPieWithCommenDataPane";
    }

}

前台部分

获取到后台传过来的自动刷新时间，通过ajax实现自动刷新

前台ajax实现自动刷新

/**
 * Created by richie on 16/1/29.
 */
EChartsFactory = function(options, $dom) {
    debugger;
    this.options = options;
    this.$dom = $dom;
    this.chartID = options.chartID;
    this.autoRefreshTime = options.chartAttr.refreshTime || 0;
    this.width = options.width || $dom.width();// 补充从dom获取.
    this.height = options.height || $dom.height();
    this.sheetIndex = options.sheetIndex || 0;
    this.ecName = options.ecName || '';
    FR.Chart.WebUtils._installChart(this, this.chartID);
};
EChartsFactory.prototype = {
    constructor : EChartsFactory,
    inits : function() {
        debugger;
        //后台传过来的数据或者样式都在 this.options.chartAttr中
        var ct = this.options.chartAttr;
        // function clear(str){return str.replace(/\s/g, '');}
        // var cleanct = clear(ct);
        // console.log(cleanct);
        // var json = JSON.parse(cleanct);
        this.newCharts = echarts.init(this.$dom[0], EChartsTheme[ct.theme]);
        this.newCharts.setOption(ct);
        this._autoRefresh(this.autoRefreshTime);
    },

    //自动刷新
    _autoRefresh: function (time) {
        if (time < 1) {
            return;
        }
        var self = this;
        setInterval(function () {
            var ID = FR.cjkEncode(self.chartID);
            var width = self.width || 0;
            var height = self.height || 0;
            var sheetIndex = self.sheetIndex;
            var ecName = self.ecName;
            if (FR.servletURL) {
                FR.ajax({
                    type: 'GET',
                    url: FR.servletURL + '?op=chartauto',
                    data: {
                        cmd: 'chart_auto_refresh',
                        sessionID: FR.SessionMgr.getSessionID(),
                        chartID: ID,
                        chartWidth: width,
                        chartHeight: height,
                        sheetIndex: sheetIndex,
                        ecName: ecName,
                        __time: new Date().getTime()
                    },
                    dataType: 'json',
                    success: function (chartRelateJS) {
                        var attrList = chartRelateJS.relateChartList;
                        for (var i = 0, len = attrList.length; i < len; i++) {
                            var chartID = FR.Chart.WebUtils._getChartIDAndIndex(attrList[i].id);
                            var chartSet = FR.ChartManager[chartID[0]];
                            if (chartSet && chartSet[chartID[1]]) {
                                var chartAttr = attrList[i].chartAttr;
                                self._setAutoRefreshData(chartSet[chartID[1]], chartAttr);
                            }
                        }
                    }
                });
            }
        }, time * 1000);
    },
    resize : function() {
        this.newCharts.resize();
    },
    refresh:function() {
    },
    refreshData:function(options){
    },
    //数据监控的刷新方式
    setData:function(options, aimation){
    }
};

示例源码

如果您希望看示例源码，您可以看这里：http://cloud.finedevelop.com:2015/users/mango/repos/plugins-democharts/browse

Page tree