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

extjs常见的三种统计图

2013-09-11 15:16 459 查看

chart.html源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>extjs统计图</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="extjs统计图">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css"
href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-base.js">

</script>
<script type="text/javascript" src="../extjs/ext-all.js">

</script>
<script type="text/javascript">

Ext.onReady(function() {
Ext.chart.Chart.CHART_URL = "../extjs/resources/charts.swf";
//定义ColumnModel
var store = new Ext.data.JsonStore( {
fields : [ 'name', 'visits', 'views' ],
data : [ {
name : '日本',
visits : 245000,
views : 3000000
}, {
name : '韩国',
visits : 240000,
views : 3500000
}, {
name : '泰国',
visits : 300000,
views : 2000000
}, {
name : '伊朗',
visits : 375000,
views : 3200000
}, {
name : '法国',
visits : 590000,
views : 3500000
}, {
name : '德国',
visits : 395000,
views : 6800000
}, {
name : '中国',
visits : 580600,
views : 8500000
} ]
});
//柱状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}

});
//折叠图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container1',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'linechart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}

});
//饼状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container2',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'piechart',
store : store,
categoryField : 'name',
dataField : 'visits',
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
},
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}

});
});

</script>
<style type="text/css">

.style {
margin-top: 30px;
margin-left: 200px;

}

</style>
</head>

<body>
<div class="style">
<h3>
柱状图
</h3>
<br />
<div id="container"></div>
<br />
<h3>
折叠图
</h3>
<br />
<div id="container1"></div>
<br />
<h3>
饼状图
</h3>
<br />
<div id="container2"></div>
</div>
</body>

</html>

效果图如图所示：

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

标签： 柱状图折叠图饼状图 extjs

相关文章推荐

新的分享

章节导航