var column_departmentQuotaUsed=new Ext.Panel({
iconCls:'chart',
frame:true,
renderTo: 'column_chart_DepartmentQuotaUsedStatic',
width:1600,
height:600,
layout:'fit',
items: {
xtype: 'columnchart', //图标类型,此处是柱形图 还有其他的图表类型,比如piechart饼状图
store: storeDepartmentQuotaUsedStatic_total, //store 存储的数据
xField: 'season', //X轴表示的数据
yAxis: new Ext.chart.NumericAxis({ //不知道干么用的
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){ //鼠标over在图形上显示的
return record.data.season + "已使用 " + Ext.util.Format.number(record.data.total, '0,0') + " 配额数,共有 " + record.data.depart_total + " 配额数"
},
chartStyle: {
padding: 10,
animationEnabled: true,
legend:{ //series显示在哪里 右边
display: "right"
},
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{ //一条柱状图
type: 'column',
displayName: '数量',
yField: 'total', //该柱状图显示的数据 是total的 在store中
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type : 'column',
displayName : '各部门总数',
yField : 'depart_total',
style : {
image:'bar.gif',
mode: 'stretch',
color : '#FF3300'
}
}
]
}
});
var column_departmentQuotaUsed=new Ext.Panel({ iconCls:'chart', frame:true, renderTo: 'column_chart_DepartmentQuotaUsedStatic', width:1600, height:600, layout:'fit', items: { xtype: 'columnchart', //图标类型,此处是柱形图 还有其他的图表类型,比如piechart饼状图 store: storeDepartmentQuotaUsedStatic_total, //store 存储的数据 xField: 'season', //X轴表示的数据 yAxis: new Ext.chart.NumericAxis({ //不知道干么用的 displayName: 'Visits', labelRenderer : Ext.util.Format.numberRenderer('0,0') }), tipRenderer : function(chart, record, index, series){ //鼠标over在图形上显示的 return record.data.season + "已使用 " + Ext.util.Format.number(record.data.total, '0,0') + " 数,共有 " + record.data.depart_total + " 数" }, chartStyle: { padding: 10, animationEnabled: true, legend:{ //series显示在哪里 右边 display: "right" }, font: { name: 'Tahoma', color: 0x444444, size: 11 }, dataTip: { padding: 5, border: { color: 0x99bbe8, size:1 }, background: { color: 0xDAE7F6, alpha: .9 }, font: { name: 'Tahoma', color: 0x15428B, size: 10, bold: true } }, xAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length: 4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines: {size: 1, color: 0xeeeeee} }, yAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length: 4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines: {size: 1, color: 0xdfe8f6} } }, series: [{ //一条柱状图 type: 'column', displayName: '需求配额', yField: 'total', //该柱状图显示的数据 是total的 在store中 style: { image:'bar.gif', mode: 'stretch', color:0x99BBE8 } },{ type : 'column', displayName : '各部门总配额数', yField : 'depart_total', style : { image:'bar.gif', mode: 'stretch', color : '#FF3300' } } ] } });
var storeDepartmentQuotaUsedStatic_total = new Ext.data.JsonStore({ fields: ['season', 'depart_total','total'], //域 url:"show_quota_pie_dao.asp?chart_type=DepartmentQuotaUsedStatic_total",//url取数据 autoLoad: true, //自动加载 root:"dataList" //根,就是从url中取出数据的开头的部分 }); json store 例如: {'dataList':[ { 'season':'A部', 'depart_total':'8', 'total':'4' }, { 'season':'B部', 'depart_total':'6', 'total':'1' }, { 'season':'C部', 'depart_total':'7', 'total':'5' }, { 'season':'D部', 'depart_total':'8', 'total':'2' }, { 'season':'E部', 'depart_total':'12', 'total':'9' }, { 'season':'F部', 'depart_total':'8', 'total':'6' }, { 'season':'G部', 'depart_total':'10', 'total':'23.5' }, { 'season':'H部', 'depart_total':'5', 'total':'2' }, { 'season':'I部', 'depart_total':'15', 'total':'2.5' }, { 'season':'总数量', 'depart_total':'62', 'total':'62'} ]}