您的位置：首页 > Web前端 > JavaScript

extjs4 面积图案例

2013-08-07 11:54 190 查看

建议用chrome或firefox打开 ie有可能有兼容性问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>独乐不如众乐</title>
<link href='http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

// 随机数据的生成
function generateData() {
var data = [{
'name' : 'metric one'
}, {
'name' : 'metric two'
}, {
'name' : 'metric three'
}, {
'name' : 'metric four'
}, {
'name' : 'metric five'
}];

for (var index = 1; index < 6; index++) {
data.forEach(function(e, i, self) {
e['data' + index] = Math.round(Math.random() * 100);
});
}

return data;
}

var store = Ext.create('Ext.data.JsonStore', {
fields : ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data : [{
'name' : 'metric one',
'data1' : 100,
'data2' : 120,
'data3' : 140,
'data4' : 80,
'data5' : 130
}, {
'name' : 'metric two',
'data1' : 7,
'data2' : 8,
'data3' : 16,
'data4' : 10,
'data5' : 3
}, {
'name' : 'metric three',
'data1' : 5,
'data2' : 2,
'data3' : 14,
'data4' : 12,
'data5' : 7
}, {
'name' : 'metric four',
'data1' : 2,
'data2' : 14,
'data3' : 6,
'data4' : 1,
'data5' : 23
}, {
'name' : 'metric five',
'data1' : 27,
'data2' : 38,
'data3' : 36,
'data4' : 13,
'data5' : 33
}]
});

var chart = Ext.create('Ext.chart.Chart', {
style : 'background:#fff',
animate : true,
store : store,
legend : {
position : 'bottom'
},
axes : [{
type : 'Numeric',
position : 'left',
fields : ['data1', 'data2', 'data3', 'data4', 'data5'],
title : 'Number of Hits',
grid : {
odd : {
opacity : 1,
fill : '#ddd',
stroke : '#bbb',
'stroke-width' : 1
}
},
minimum : 0,
adjustMinimumByMajorUnit : true
}, {
type : 'Category',
position : 'bottom',
fields : ['name'],
title : 'Month of the Year',
grid : true,
label : {
rotate : {
degrees : 315
}
}
}],
series : [{
type : 'area',
highlight : false,
axis : 'left',
xField : 'name',
yField : ['data1', 'data2', 'data3', 'data4', 'data5'],
style : {
opacity : 0.93
}
}]
});

var win = Ext.create('Ext.window.Window', {
width : 800,
height : 600,
minHeight : 400,
minWidth : 550,
hidden : false,
shadow : false,
maximizable : true,
title : 'Area Chart',
autoShow : true,
layout : 'fit',
tbar : [{
text : 'Save Chart',
handler : function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?',
function(choice) {
if (choice == 'yes') {
chart.save({
type : 'image/png'
});
}
});
}
}, {
text : 'Reload Data',
handler : function() {

store.loadData(generateData());

}
}, {
enableToggle : true,
pressed : true,
text : 'Animate',
toggleHandler : function(btn, pressed) {
chart.animate = pressed ? {
easing : 'ease',
duration : 500
} : false;
}
}],
items : chart
});
});
</script>

</head>
<body>

<div id="my-div"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航