• Open Flash Chart 初体验


    今天项目中要用到图表统计,原来用的是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  。。。

  • 相关阅读:
    Hadoop.2.x_集群初建
    Hadoop.2.x_网站PV示例
    Hadoop_简单操作ZooKeeper
    Hadoop.2.x_时间服务器搭建(CentOs6.6)
    Linux_Scp命令
    Java_Eclipse_Maven环境搭建
    Java_Eclipse_Maven插件部署
    HDU 1394 线段树or 树状数组~
    hdu
    HDU 4070 + 赤裸裸的贪心~~
  • 原文地址:https://www.cnblogs.com/zhangqifeng/p/1559130.html
Copyright © 2020-2023  润新知