ExtJs 画出图表
ExtJs API地址 http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/example
今天心情不好，决定写博客，发泄发泄，进入主题
好吧，刚接触Extjs不久，发现ExtJs前台表现真的非常强大，最近看着api的例子，自己做了一张图表，再次总结一下
1)画图
Ext.define('POWERCONSUMPTIONGRAPHS.view.PowerConsumptionGraphsIndex' ,{
extend: 'Ext.container.Container',
alias : 'widget.powerconsumptiongraphsindex',
layout:'border',
// 初始化组件
initComponent: function() {
this.items = [this.createQueryFiled(),this.createLineChartArea()];
this.callParent(arguments);//调用父类构造方法
},
/*--------------------------查询区域----------------------------*/
createQueryFiled:function(){
var me = this;
//组件缓存queryField供生成实例时访问
me.queryFieldForm = Ext.create("Ext.form.Panel",{
id:'graphsQueryFieldForm',
name:'graphsQueryFieldForm',
region:'north',
height:120,
margin:1,
tbar: [
{xtype:'button',text:wake.t("dxic","ext","dxic.indexQuery"),id:'reportQuery',iconCls:wake.CSS.queryImage},'-',
{xtype:'button',text:wake.t("dxic","ext","dxic.indexReset"),id:'reportClear',iconCls:wake.CSS.resetImage}
],
defaults: {
labelWidth:105
,padding:'3 5'
,columnWidth:0.25
,xtype:'textfield'
,labelAlign:'right'
}
,layout: "column"
,items:[
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.startYearDate"),afterLabelTextTpl:wake.TEXT.redStar,id:'indexStartYearDate', name:"startYearDate",xtype:'wakemonthfield',format:'Y',editable:false},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.endYearDate"),afterLabelTextTpl:wake.TEXT.redStar,id:'indexEndYearDate',name:"endYearDate",xtype:'wakemonthfield',format:'Y',editable:false},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.monthYearDate"),afterLabelTextTpl:wake.TEXT.redStar,id:'indexMonthYearDate',name:"monthYearDate",xtype:'wakemonthfield',format:'Y',editable:false,hidden:true},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.area"), id:'indexAreaName',name:"areaName",viewClassName:'areaselect',xtype:'waketextwindow'},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.area"), id:'indexAreaCompleteCode',name:"areaCompleteCode",hidden:true},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.manualGroupName"), id:'indexManulGroupName',name:"manualGroupName", xtype:'wakecombobox', dictUrl:'com.beiyanght.dxic.dxms.domain.autogroup.AutoGroup.getAutoGroup', editable:false,hidden:true},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.autoGroupName"), id:'indexAutoGroupName',name:"autoGroupName", xtype:'wakecombobox', dictUrl:'com.beiyanght.dxic.dxms.domain.autogroup.AutoGroup.getAutoGroup', editable:false,hidden:true},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.roadSide"), id:'indexRoadSide',name:"roadSide",xtype:'wakecombobox', dictUrl:'com.beiyanght.dxic.dxms.domain.masterdata.MasterData.findRoadSide', editable:false},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.sequence"), id:'indexSequence',name:"sequence",xtype:'numberfield',minValue:0,mouseWheelEnabled:false},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.zigbee"), id:'indexZigbee',name:"zigbee"},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.phone"), id:'indexGateWayNumber',name:"gateWayNumber"},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.gateWayName"), id:'indexGateWayName',name:"gateWayName"},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.number"), id:'indexNumber',name:"number"},
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.lampType"), id:'indexLampType',name:"lampType", xtype:'wakecombobox', dictUrl:'com.beiyanght.dxic.dxms.domain.equipment.LampType.getAllLampType', editable:false},
{ id:'indexRadioGroup',
name:"yearOrMonth",
xtype: 'radiogroup',
fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.category"),
columns: 2,
vertical: true,
items: [
{ boxLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.year"), name: 'yearOrMonth', inputValue: '1' ,id:'radioYear',checked: true},
{ boxLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.queryFieldForm.month"), name: 'yearOrMonth', inputValue: '2' ,id:'radioMonth'}
]
}
]
});
return me.queryFieldForm;
}
,createLineChartArea:function(){
var me = this;
//创建图表区域
me.lineChartArea = Ext.create("Ext.form.Panel",{
region:'center',
layout: "border"
,items:[
this.createLineChart(),this.createSumForm()
]
});
return me.lineChartArea;
}
,createLineChart:function(){
var me = this;// 折线图实例
// me.yearLineChart = Ext.create('Ext.chart.Chart', {
// renderTo: Ext.getBody(),
// id:'indexYearLineChat',
// name:'indexYearLineChat',
//// width: 100,
//// height: 100,
// region:"center",
//// margin:'0 2 0 0',
// animate: true,
// store: Ext.create('POWERCONSUMPTIONGRAPHS.store.PowerConsumptionGraphsYearStore'),
// axes: [
// {
// type: 'Numeric',
// position: 'left',
// fields: ['yearConsumptionData'],
//// label: {
//// renderer: Ext.util.Format.numberRenderer('1,100')
//// },
// title: '总耗电量（KW/h）',
// grid: true,
// minorTickSteps: 1,
// minimum: 0
// },
// {
// type: 'Category',
// position: 'bottom',
// fields: ['yearName'],
// title: '年'
// }
// ],
// series: [
// {
// type: 'line',
// highlight: {
// size: 7,
// radius: 7
// },
// axis: 'left',
// xField: 'yearName',
// yField: 'yearConsumptionData',
// markerConfig: {
// type: 'cross',
// size: 4,
// radius: 4,
// 'stroke-width': 0
// }
// }
// ]
// });// 柱状图实例
me.yearLineChart = Ext.create('Ext.chart.Chart', {
id: 'indexYearLineChat',
xtype: 'chart',
// style: 'background:#fff',
animate: true,
width:600,
maxWidth:600,
minHeight:260,
margin:100,
region:"west",
shadow: true,
store: Ext.create('POWERCONSUMPTIONGRAPHS.store.PowerConsumptionGraphsStore'),
axes: [{
type: 'Numeric',
position: 'left',
fields: ['consumptionData'],
label: {
// renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'POWER CONSUMPTION ( kw / h )',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Year Or Month'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 150,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('consumptionData') + 'kw/h');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'consumptionData',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'came',
yField: 'consumptionData'
}]
});
return me.yearLineChart;
},
//初始化企业管理明细
createSumForm:function(){
//组件缓存queryField供生成实例时访问
this.sumForm = Ext.create("Ext.form.Panel",{
id:'indexSumForm'
,name:'indexSumForm'
,region:'south'
,margin:10
,height:100
,width:300
,defaults: {
labelWidth:120
,padding:'3 5'
,columnWidth:0.5
,xtype:'textfield'
,labelAlign:'right'
}
,layout: "column"
,items:[
{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.sumForm.sumConsumption"),name:'sumConsumption'}
,{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.sumForm.avgConsumption"),name:'avgConsumption'}
,{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.sumForm.maxConsumption"),name:'maxConsumption'}
,{fieldLabel: wake.t("dxic","powerconsumptionstatic","PowerConsumptionStaticIndex.sumForm.minConsumption"),name:'minConsumption'}
]
});
return this.sumForm;
}
});2）后台查询ctrl
// 资源请求路径
var path = "powerConsumptionGraphs/";
Ext.define('POWERCONSUMPTIONGRAPHS.controller.PowerConsumptionGraphsCtrl',{
extend:'Ext.app.Controller',
views:['PowerConsumptionGraphsIndex'],
init:function(){
this.control({
/**--------------------index界面方法---------------------**/
//检索
'#reportQuery':{click:this.indexQuery},
//清空
'#reportClear':{click:this.indexReset},
//单选按钮触发事件
'#indexRadioGroup':{change:this.changeRadio},
//区域弹窗
'areaselect':{selectitem:this.selectReturn}
});
}
,selectReturn:function(data,callerId,caller){
if(Ext.isEmpty(callerId)){
}
else if(callerId=="indexAreaName"){
Ext.getCmp("indexAreaName").setValue(data.get("areaName"));
Ext.getCmp("indexAreaCompleteCode").setValue(data.get("completeCode"));
Ext.getCmp("indexAreaName").win.close();
}
},
//单选按钮触发事件
changeRadio:function(field, newValue, oldValue, eOpts ){
//如果是按年查询
if(newValue.yearOrMonth=="1"){
Ext.getCmp("indexStartYearDate").setVisible(true);
Ext.getCmp("indexEndYearDate").setVisible(true);
Ext.getCmp("indexMonthYearDate").setVisible(false);
}else if(newValue.yearOrMonth=="2"){
Ext.getCmp("indexStartYearDate").setVisible(false);
Ext.getCmp("indexEndYearDate").setVisible(false);
Ext.getCmp("indexMonthYearDate").setVisible(true);
}else {
//
}
},
//查询
indexQuery:function(){
//如果为选择类型
//选择年，就必须填写起始年和种植年
console.info(Ext.getCmp("radioMonth").getValue());
if(Ext.getCmp("radioYear").getValue()){
startYearDate = Ext.util.Format.date(Ext.getCmp("indexStartYearDate").getValue(),'Y');
endYearDate = Ext.util.Format.date(Ext.getCmp("indexEndYearDate").getValue(),'Y');
if (Ext.isEmpty(startYearDate) || Ext.isEmpty(endYearDate)) {
Ext.Msg.alert(wake.t("dxic","ext","dxic.operateInfo"), wake.t("dxic","ext","dxic.fillStartDateAndEndDate"));
return;
}else if(startYearDate > endYearDate){
Ext.Msg.alert(wake.t("dxic","ext","dxic.operateInfo"), wake.t("dxic","ext","dxic.startDateMoreThanEndDate"));
return;
}
}else if(Ext.getCmp("radioMonth").getValue()){
monthYearDate = Ext.getCmp("indexMonthYearDate").getValue();
if (Ext.isEmpty(monthYearDate)) {
Ext.Msg.alert(wake.t("dxic","ext","dxic.operateInfo"), wake.t("dxic","ext","dxic.fillYear"));
return;
}
}
// 获取select界面，开启遮罩层
var powerConsumptionGraphsIndex = Ext.getCmp("powerConsumptionGraphsIndex");
powerConsumptionGraphsIndex.setLoading(true);
//获取图表|获取form
var indexYearLineChat = Ext.getCmp("indexYearLineChat");
var indexSumForm = Ext.getCmp("indexSumForm");
//获取查询条件
var condition = wake.getContainerValues(powerConsumptionGraphsIndex.queryFieldForm);
//创建路径
var url = restPath+path+"findConsumptionByCondition"+"?condition="+Ext.JSON.encode(condition);
//组装请求对象，并调用框架的请求方法发送请求
wake.ajax({
contentType:'application/json',
dataType:'json',
type: "GET",//获取信息用GET|新增、更改信息用POST|删除信息用DELETE|修改一个资源用PUT
url: url,
timeout:30000,//超时连接
success:function(data){
if(data){
//将查询出的内容填充的grid中去
console.info(data);
indexYearLineChat.getStore().loadData(data.dataList);
wake.setContainerValues(powerConsumptionGraphsIndex.sumForm,data);
}
//取消遮罩
powerConsumptionGraphsIndex.setLoading(false);
wake.showMessage(wake.t("dxic","ext","dxic.querySuccess"));
},
error:function(){
powerConsumptionGraphsIndex.setLoading(false);
wake.showMessage(wake.t("dxic","ext","dxic.queryFailed"));
}
});
},
//重置
indexReset:function(){
//获取form容器
Ext.getCmp("graphsQueryFieldForm").getForm().reset();
}
});
//单选按钮触发事件
'#indexRadioGroup':{change:this.changeRadio}下面看看效果图吧
--------ExtJsの画图表.png
