根据公司的规划，要实现一个自定义的查询组件，其中包括了自定义图表，基本要求是：
1、 图表可以自定义，定义完成后保存到数据库中
2、 根据保存到数据库的图表定义正确的展现出图表，包括样式、轴、序列、查询条件、查询按钮等。
3、 数据源通过配置获取，再根据数据源，查询出数据（可能不在同一个数据库中）。
这里不关心图表定义、数据来源和图表展现时的查询条件与查询按钮等，只关注如何用Ext正确展现自定义图表的部分。
经过查看ext文档、探索、尝试，知道Ext的图表主要包括四个问题：图表本身(主要是样式)、轴、序列和store，而且轴、序列和store的设置要匹配（主要是字段要匹配）。
现在可以开始创建图表了，创建图表之前要先创建出来轴、序列和store（没有顺序）：
创建轴：
[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;
}
创建序列：
[javascript]
createSeries:function(seriesRecords){
var series = [];
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: fField
};
if(label)
ser.label = label;
series.push(ser);
}
return series;
}
由代码可以看出，每个轴或序列都是一个json格式的对象，全部轴或序列就一个数组。
创建store：
[javascript]
createChartStore:function(){
var seriesRecords = Ext.getStore('ChartSeries').getRange();
var axisRecords = Ext.getStore('ChartAxes').getRange();
var fieldArr = [];
var idx, fields;
// 根据轴和序列得到要store应该包括哪些内容
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(','));
}
// 创建store
var store = Ext.create('Ext.data.Store', {
//pageSize :pageSize,
fields:fieldArr,
proxy: {
type : 'ajax',
url : '/hummer/application/controller/run/FindChartData.action',
&nb
补充：web前端 , JavaScript ,
