extjs 3.4.0与4.0.7的多字段柱形图对比
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>衡量指标回顾条形图</title>
<link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/extjs/ext-all.js"></script>
<script type="text/javascript" src="../js/extjs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<%
//String jfk = request.getParameter("bscsbh");
//String zb = request.getParameter("measuresbh");
String jfk = "1003";//1116-1003
String zb = "10610";
%>
<script type="text/javascript">
Ext.chart.Chart.CHART_URL = '../js/extjs/resources/charts.swf';
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
autoDestroy : true,
url : 'chartJsonDate.jsp',
baseParams : {'jfk': '<%=jfk%>','zb':'<%=zb%>'},
root : 'root',
fields : ['A', 'B', 'SJ','QJ']
});
store.load();
new Ext.Panel({
applyTo: 'container',
width: 350,
height: 179,
layout: 'fit',
items: {
xtype: 'columnchart',
store: store,
xField: 'QJ',
series: [{ //列
type: 'column', //类型可以改变（线）
displayName: 'A值',
yField: 'A',
style: {
color: 0x0000FF
}
}, {
type: 'column',
displayName: 'B值',
yField: 'B',
style: {
color: 0x008000
}
},{
type: 'column',
displayName: '实际值',
yField: 'SJ',
style: {
color: 0xFFFF00
}
}]
}
});
});
</script>
<div id="container">
<div style="position:absolute;padding-left:355;padding-top:50;">
<div style="background-color:#0000FF;height:14px;width:20px;"></div>
<div style="height:20px;"></div>
<div style="background-color:#008000;height:14px;width:20px;"></div>
<div style="height:20px;"></div>
<div style="background-color:#FFFF00;height:14px;width:20px;"></div>
</div>
<div style="position:absolute;padding-left:375;padding-top:50;font-size:10px;width:40px;">
<div style="height:20px;"> A值</div>
<div style="height:14px;"></div>
<div style="height:20px;"> B值</div>
<div style="height:14px;"></div>
<div style="height:20px;">实际值</div>
</div>
</div>
</html>
{'root':[{'A':'1848.35','B':'1848.35','SJ':'1687.1','QJ':'第一季度'},{'A':'1860.74','B':'1860.74','SJ':'0','QJ':'第二季度'},{'A':'2189.85','B':'2189.85','SJ':' 0','QJ':'第三季度'},{'A':'2429.59','B':'2429.59','SJ':' 0','QJ':'第四季度'},{'A':'8328.53','B':'8328.53','SJ':' 0','QJ':'全年'}]}
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<%
//String jfk = request.getParameter("bscsbh");
//String zb = request.getParameter("measuresbh");
String jfk = "1003";//1116-1003
String zb = "10610";
%>
<head>
<link rel="stylesheet" type="text/css" href="../js/extjs4.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../js/extjs4.1/examples/shared/example.css" />
<script type="text/javascript" src="../js/extjs4.1/bootstrap.js"></script>
<script type="text/javascript">
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.onReady(function() {
Ext.define("model",{
extend:"Ext.data.Model",
fields:[
{name:'A值',type:'float'},
{name:'B值',type:'float'},
{name:'实际值',type:'float'},
{name:'季度',type:'string'}
]
});
var store = new Ext.data.JsonStore({
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'columnJsonDate.jsp?jfk=<%=jfk%>&zb=<%=zb%>',
reader: {
type: 'json',
root: 'root'
}
},
model: 'model',
autoLoad:true
});
var panel = Ext.create('widget.panel', {
width: 400,
height: 179,
renderTo: Ext.getBody(),
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
shadow: true,
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['A值', 'B值', '实际值'],
minimum: 0,
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['季度']
}],
series: [{
type: 'column',
axis: 'bottom',
xField: '季度',
yField: ['A值', 'B值', '实际值'],
tips: {
trackMouse: true,
width: 60,
height: 26,
renderer: function(storeItem, item) {
this.setTitle(item.value[1]);
}
}
}]
}
});
});
</script>
</head>
<body id="docbody">
</body>
</html>
{'root':[{'A值':'1848.35','B值':'1848.35','实际值':'1687.1','季度':'第一季度'},{'A值':'1860.74','B值':'1860.74','实际值':' 0','季度':'第二季度'},{'A值':'2189.85','B值':'2189.85','实际值':' 0','季度':'第三季度'},{'A值':'2429.59','B值':'2429.59','实际值':' 0','季度':'第四季度'},{'A值':'8328.53','B值':'8328.53','实际值':' 0','季度':'全年'}]}