ExtJs pie chart 动态数据统计

最新推荐文章于 2020-07-07 15:08:26 发布

chenwq1988

最新推荐文章于 2020-07-07 15:08:26 发布

阅读量175

点赞数

分类专栏： ExtJS 文章标签： ASP EXT json DAO SQL

ExtJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

无图不给力!
[img]http://dl.iteye.com/upload/picture/pic/84759/edb7db38-eaaa-3657-a88f-7012eaaa3ff9.jpg[/img]
[img]http://dl.iteye.com/upload/picture/pic/84757/7d5b4b45-e2bd-3688-a945-b3edce1e01e3.jpg[/img]
[img]http://dl.iteye.com/upload/picture/pic/84983/f760e397-64a3-3ee4-98f0-ab66b5ee862d.jpg[/img]