Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.require(['Ext.data.*']);
Ext.onReady(function() {
Ext.Loader.setConfig({
enabled : true
});
Ext.define("stat", {
extend : "Ext.data.Model",
fields : [{
name : 'name'
}, {
name : 'data1'
},{
name : 'data2'
}],
proxy : {
type : 'memory'
}
});
var store1 = new Ext.data.Store({
proxy:{
type:'ajax',
url:'http://localhost:8080/AutoFactDesk/servlet/ChartsServlet'
},
model : 'stat'
// autoLoad : true
});
store1.load();
/*
store1.load(function(records,operation,success){
Ext.Array.each(records,function(model){
alert(model.get('name'));
});
});
*/
//use a renderer for values in the data view.
function perc(v) {
return v + '%';
}
var panel3 = Ext.create('widget.panel', {
width: 600,
height: 300,
renderTo:'chart1',
border:false,
layout: 'fit',
items: {
xtype: 'chart',
animate: false,
store: store1,
insetPadding: 30,
gradients: [{
angle: 90,
id: 'bar-gradient',
stops: {
0: {
color: '#99BBE8'
},
70: {
color: '#77AECE'
},
100: {
color: '#77AECE'
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 100,
position: 'left',
fields: ['data1'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0'),
font: '10px Arial'
}
}, {
type: 'Numeric',
minimum: 0,
maximum: 100,
position: 'right',
fields: ['data2'],
title: false,
grid: true,
label: {
renderer: perc,
font: '10px Arial'
}
},{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false,
grid: true,
label: {
font: '11px Arial',
renderer: function(name) {
return name.substr(0, 3);
}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data1',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
style: {
fill: 'url(#bar-gradient)',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#38B8BF',
stroke: '#38B8BF'
}
}, {
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data2',
highlight: {
size: 5,
radius: 5
},
tips: {
trackMouse: true,
width: 110,
height: 25,
renderer: function(storeItem, item) {
var str='';
var data=perc(storeItem.get('data2'));
//this.setTitle(storeItem.get('data2') + ' visits in ' + storeItem.get('name').substr(0, 3));
var month=storeItem.get('name').substr(0, 3);
str=str+data+' in '+month;
this.setTitle(str);
}
},
style: {
fill: '#38B8BF',
stroke: '#38B8BF',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#38B8BF',
stroke: '#38B8BF'
}
}]
}
});
});
ExtJs 4.0图表访问sevlet
猜你喜欢
转载自jenniferamanda.iteye.com/blog/1700548
今日推荐
周排行