【仅供内部供应商使用,不提供对外解答和培训】
【仅供内部供应商使用,不提供对外解答和培训】
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类的的自动刷新时间保存到模版中,预览时,传到前台去
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"; } }
/** * 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
【仅供内部供应商使用,不提供对外解答和培训】