Dynamic generation of Ext charts

According to the company's plan, to implement a custom query component, including custom charts, the basic requirements are as follows: 1. charts can be customized, after the definition is complete, save it to the database. 2. display the chart correctly according to the chart definition saved to the database, including the style, axis, sequence, query condition, and query button. 3. The data source is obtained through configuration and then queried based on the data source (may not be in the same database ). Here, we do not care about the chart definitions, data sources, query conditions, and query buttons when displaying charts. We only care about how to correctly display the custom charts with Ext. After reading the ext document, exploring, and trying, I know that the Ext chart has four main problems: the chart itself (mainly style), axis, sequence, and store, in addition, the axis, sequence, and store settings must match (mainly because the fields must match ). Now you can create a chart. Before creating a chart, you must create an axis, sequence, and store (no sequence): Create an axis: [javascript] createAxes: function (axisRecords) {var axes = []; var axis; for (var idx = 0; idx <axisRecords. length; idx ++) {var gridStr = axisRecords [idx]. get ('grid'); var grid = gridStr = ""? False: Ext. JSON. decode (gridStr); var labelStr = axisRecords [idx]. get ('label'); var label = labelStr = ''? "": Ext. JSON. decode (labelStr); var axisField = axisRecords [idx]. get ('fields'); axis = {type: axisRecords [idx]. get ('axistype '), position: axisRecords [idx]. get ('position'), fields: axisField, title: axisRecords [idx]. get ('title'), dashSize: axisRecords [idx]. get ('dashsize'), label: label, grid: grid}; axes. push (axis) ;}return axes ;}create sequence: [javascript] createSeries: function (seriesRecords) {var serie S = []; var ser, labelStr, label, tipStr, tips, sourceName, xfield; var fField; for (var idx = 0; idx <seriesRecords. length; idx ++) {fField = seriesRecords [idx]. get ('yfield '); labelStr = seriesRecords [idx]. get ('label'); label = labelStr = ''? "": Ext. JSON. decode (labelStr); tipStr = seriesRecords [idx]. get ('tips'); tips = tipStr = ''? '': Ext. JSON. decode (tipStr); sourceName = seriesRecords [idx]. get ('sourcename'); xfield = seriesRecords [idx]. get ('xfield '); xField = xfield = null? '': Xfield. toUpperCase (); ser = {type: seriesRecords [idx]. get ('seriestype '), axis: seriesRecords [idx]. get ('axis '), highlight: true, title: sourceName, tips: tips, showMarkers: true, markerConfig: {color:' # f00'}, fill: seriesRecords [idx]. get ('fill'), showInLegend: seriesRecords [idx]. get ('showlegend'), stacked: seriesRecords [idx]. get ('stacked'), xField: xfield, yField: fField, angleField: fFiel D}; if (label) ser. label = label; series. push (ser);} return series;} The Code shows that each axis or sequence is a json object, and all axes or sequences are an array. Create store: [javascript] createChartStore: function () {var seriesRecords = Ext. getStore ('chartseries '). getRange (); var axisRecords = Ext. getStore ('chartaxes '). getRange (); var fieldArr = []; var idx, fields; // obtain the content to store based on the axis and sequence for (idx = 0; idx <axisRecords. length; idx ++) {fields = axisRecords [idx]. get ('fields'); if (fields! = Null) fieldArr = Ext. array. merge (fieldArr, fields. toUpperCase (). split (',');} for (idx = 0; idx <seriesRecords. length; idx ++) {fields = seriesRecords [idx]. get ('xfield '); if (fields! = Null) fieldArr = Ext. array. merge (fieldArr, fields. toUpperCase (). split (','); fields = seriesRecords [idx]. get ('yfield '); if (fields! = Null) fieldArr = Ext. array. merge (fieldArr, fields. toUpperCase (). split (',');} // create store var store = Ext. create ('ext. data. store', {// pageSize: pageSize, fields: fieldArr, proxy: {type: 'ajax ', url:'/hummer/application/controller/run/FindChartData. action ', reader: {type: 'json', root: 'rows', totalProperty: 'totalcount' }}, autoLoad: false}); var pageNum = this. getOptionValue ('number of data entries per page' ); // Obtain the page parameter value and the configured query parameter store before loading. on ('beforeload', function (store, options) {var conditionValues = Ext. getCmp ('conditionform '). getForm (). getValues (); var constantValue = [currentUser, currentUnit, currentYearMonth, pageNum]; var params = {queryId: queryId, paramsValue: conditionValues, constantValue: constantValue}; Ext. apply (store. proxy. extraParams, params);}); return store;} the remaining problems are simple. After assembling the chart, you can: [javascript] createChartPanel: function (btns) {var axisModels = Ext. getStore ('chartaxes '). getRange (); var axes = this. createAxes (axisModels); var mySeries = this. createSeries (Ext. getStore ('chartseries '). getRange (); var chartStyle = Ext. getStore ("ChartStyle "). getRange (); var pieXfield = ''; if (mySeries. length> = 1 & mySeries [0] ['type'] = 'pie') {pieXfield = mySeries [0] ['xfield '];} var st Ore = this. createChartStore (mySeries); var seriesLegend = false; var myLegend = chartStyle [0]. get ("legend"); for (var idx in mySeries) {seriesLegend = seriesLegend | (mySeries [idx] ['showinlegend']);} // when no position is displayed or all sequences are not displayed, if (myLegend = null | myLegend = 'false' | myLegend = false | myLegend = '{"position ": ""} '| (seriesLegend = false) {myLegend = false;} else {myLegend = (myLegen D = null | myLegend = 'null' | myLegend = '')? {Position: 'bottom '}: Ext. JSON. decode (myLegend. toLowerCase (); if (! MyLegend ['position']) myLegend ['position'] = 'bottom';} // sort var sortFields = [], sortField; for (idx in axisModels) {fieldName = axisModels [idx]. get ('fields'); if (axisModels [idx]. get ('sorttype') {// sort for (var I in fieldName) {sortField ={}; sortField ['properties'] = fieldName [I]; sortField ['direction'] = axisModels [idx]. get ('sorttype'); sortFields. push (sortField) ;}} store. sort (sortFields ); // Sort var background = chartStyle [0]. get ("background"); // handle the border var border = chartStyle [0]. get ("border"); var myStyle = chartStyle [0]. get ("style"); var myChart = Ext. create ("Ext. chart. chart ", {id: 'chartcmp ', width: Ext. number. from (chartStyle [0]. get ("width"), height: Ext. number. from (chartStyle [0]. get ("height"), xtype: 'chart', // autoSize: true, background: background, border: border, style: myS Tyle, // tpl: 'chart title', legend: myLegend, theme: chartStyle [0]. get ("theme"), animate: chartStyle [0]. get ("animate"), resizable: chartStyle [0]. get ("resizable"), // shadow: true, store: store, axes: axes, series: mySeries //,}); return myChart;} until now, A complete dynamic chart has been created. You can decide where to display it. From the creation of this custom chart, we can see that the Ext object is basically in the configuration format, which is similar to the json format, or json format, however, I did not go deep into the Ext source code.