今天项目中要用到图表统计,原来用的是Dundas 但效果不怎么好 后来发现Open Flash Chart不错  而且是结合着
Flash 比较动态  可到官方下载查看http://teethgrinder.co.uk/open-flash-chart/
而且是很多语言都支持的  虽然有专门语言的,但我还是喜欢使用原生的.
项目是用asp.net做  官方有直接由对其封装的dll,个人觉得没必要 ,直接构建更好 移植到其他语言也方便。
项目中只用到了饼图  所以也就只看了饼图 。。。。
使用:
//导入swfobject.js和open-flash-chart.swf
//mychart 要渲染的DIV       data.aspx?type=1  json格式数据源
   <script type="text/javascript" src="../JS/swfobject.js"></script>

    <script type="text/javascript">

swfobject.embedSWF("../flash/open-flash-chart.swf", "mychart", "400", "220", "9.0.0", "expressInstall.swf", {"data-file":"data.aspx?type=1"});

    </script>

那来看一下data.aspx

        string type = Request.Params["type"];
       
        StringBuilder sb = new StringBuilder();
        string title = "";
        string vid = Session["villageId"].ToString();
        if (type != "")
        {
//构建JSON格式
//tip  鼠标悬停提示  val当期值  total总值 percent百分比  都人家给你算好了 自己不用操心
            sb.Append("{");
            sb.Append("\"elements\":[{\"tip\":\"#val#人/共#total#人   所占百分比#percent#\",\"font-size\": 13,");
            sb.Append("\"colours\":[\"#0247fe\", \"#3d01a4\", \"#8601af\", \"#a7194b\",\"#fe2712\", \"#fd5308\", \"#fb9902\", \"#fabc02\",");
            sb.Append("\"#fefe33\", \"#d0ea2b\", \"#66b032\", \"#0392ce\",\"0x663366\", \"0x9999CC\", \"0xAAAAAA\", \"0x669999\",\"0xBBBB55\", \"0xCC6600\",\"0x9999FF\", \"0x0066CC\",\"0x99CCCC\"], \"alpha\" : 0.3, \"animate\": true, \"label-colour\": \"#432baf\",");
            sb.Append("\"values\":[");
            int i = 1;
            //年龄统计
            if (type == "1")
            {
                using (SqlDataReader sdr = YQKC.DBOper.DataReader("agestatistics", new SqlParameter("vid", vid)))
                {

                    while (sdr.Read())
                    {
                        sb.Append("{\"value\":" + sdr[1].ToString() + ",");
                        if (i != 5)
                        {
                            sb.Append("\"label\":\"" + sdr[0].ToString() + "\"},");
                        }
                        else
                            sb.Append("\"label\":\"" + sdr[0].ToString() + "\"}");
                        i++;
                    }
                    title = "年龄分布图";
                }
            }

    

            //学历分布
            if (type == "2")
            {
               //略

            }
    
            sb.Append("],");
            sb.Append("\"type\":\"pie\",\"border\" : \"2\"");
            sb.Append("}],");
            sb.Append("\"bg_colour\" : \"#FAFAFA\", \"title\" : {");
            sb.Append("\"text\": \"" + title + "\",\"style\": \"{font-size: 14px; color:#0000ff; font-family: Verdana; text-align: center;}\"");
            sb.Append("}");
            sb.Append("}");
            Response.Write(sb.ToString());
        }

构建的时候  注意不能用单引号!

如此就OK  。。。

posted on 2009-09-02 22:20  冷傲残痕  阅读(865)  评论(0编辑  收藏  举报