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 style, axis, sequence, and query... syntaxHighlighter. all (); according to the company's plan, to implement a custom query component, including a custom chart, the basic requirements are: 1. The chart 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 {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 series = []; var ser, labelStr, label, tipStr, tips, sourceName, xfield; var fField; for (var idx = 0; idx = 1 & mySeries [0] ['type'] = 'pie') {pieXfield = mySeries [0] ['xfield '];} var store = 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 = (myLegend = 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.