Ext4.1动态生成折线图
Ext4.1动态生成折线图，其实就是动态创建store对象就好了，然后配置好折线图的x和y轴。
示例DEMO如下
data.asp
<%
data=""
'==========查询数据库得到记录组合成json字符串赋值给data变量
'==========这里简单示例，直接赋值了
data="[{x:10,y:10},{x:20,y:80},{x:30,y:20},{x:40,y:30},{x:50,y:40},{x:60,y:50},{x:70,y:60},{x:80,y:70}]"
response.Write data
%>
Ext4.1.dynamic.line.chart.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Line Chart</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: 'data.asp',
reader: { type: 'json' }
},
fields: ['x', 'y'],
autoLoad: true
});
var chart1 = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: false,
store: store,
width: 500,
height: 300,
renderTo: document.body,
insetPadding: 30,
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['y'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0'),
font: '10px Arial'
}
}, {
type: 'Category',
position: 'bottom',
fields: ['x'],
title: false,
label: {
font: '11px Arial'
}
}],
series: [{
type: 'line',
axis: 'left',
xField: 'x',
yField: 'y',
listeners: {
itemmouseup: function (item) {//顶点点击事件
alert('y:' + item.storeItem.get('y') + '\nx:' + item.storeItem.get('x'));
}
},
tips: {
trackMouse: true,
width: 80,
height: 40,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('y'));
this.update(storeItem.get('x'));
}
},
style: {
fill: '#38B8BF',
stroke: '#38B8BF',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#38B8BF',
stroke: '#38B8BF'
}
}]
});
});
</script>
</head>
<body id="docbody">
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext4.1动态生成折线图