ExtJs pie chart 动态数据统计

chenwq

浏览: 563993 次
性别:
来自: 济南

最近访客更多访客>>

thtf2001

u012363178

jiumoji

song0394

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

ASP EXT json DAO SQL

pie_chart.js

// 必需,ExtJs图标是基于Flash的
Ext.chart.Chart.CHART_URL = 'lib/ext-3.3.1/resources/charts.swf';

Ext.onReady(function(){
    var store = new Ext.data.JsonStore({
        fields: ['season', 'total'],
        // 获取Json数据的URL
        url:"show_quota_pie_dao.asp",
        // 设置自动获取
        autoLoad: true,
        root:"dataList"
    });
    
    new Ext.Panel({
        width: "100%",
        height: 768,
        title: '需求配额使用情况',
        renderTo: 'container',
        items: {
            store: store,
            xtype: 'piechart',
            dataField: 'total',
            categoryField: 'season',
            extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: '宋体',
                        size: 13
                    }
                }
            }
        }
    });
});

show_quota_pie_dao.asp

<!--#INCLUDE FILE = "db/opendb.asa"-->
<!--#INCLUDE FILE = "checkuser.asp"-->
<!--#INCLUDE FILE = "sub/sub_index.asp"-->
<!--#INCLUDE FILE = "baseinfo.asp"-->
<%
sql = "select count(*) as total from t_require_info"
set rs = db.execute(sql)
total = rs("total")

'构造Json数据
response.Write "{'dataList':[ { 'season':'John', 'total':'"&total&"'},{ 'season':'John12', 'total':'50'} ]}"

'清空缓存
response.Flush()
response.End()
%>

show_quota_pie.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-3.3.1/ext-all.js"></script>

<script type="text/javascript" src="js/pie_chart.js"></script>

<link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/examples/shared/examples.css" />

</head>
<body>
<script type="text/javascript" src="lib/ext-3.3.1/examples/shared/examples.js"></script><!-- EXAMPLES -->
<div id="container">
    
</div>

</body>
</html>

无图不给力!