精华内容
下载资源
问答
  • 3d效果的,动态的,鼠标指到上边就可以分离出来的,flash的,饼形图。很不错的
  • echart2.0的开发可以参考开发文档https://echarts.baidu.com/echarts2/doc/example.html ... 本文使用的是echart4.X,因此下文介绍方法主要适合echart4.X的写法。 参考文档可知: option = { tit...

    echart2.0的开发可以参考开发文档https://echarts.baidu.com/echarts2/doc/example.html

    echart4.X的开发可以参考开发文档https://echarts.baidu.com/examples/

    本文使用的是echart4.X,因此下文介绍方法主要适合echart4.X的写法。

    参考文档可知:

    option = {
        title : {
            text: '同名数量统计',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,

            selected: data.selected
        },
        series : [
            {
                name: '姓名',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data: data.seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    echart4.X非常方便,只需要在legend中添加selected:data.selected(想要显示的数据即可)。

    示例中有一句话selected[name] = i < 6。主要理解好这句话就可以,根据优先级,先做逻辑判断,如果i<6,那么selected[name] = true,否则selected[name] = false。

    还有一个需要注意的是,var selected = {};注意区分var selected = [];这样的写法。

    示例代码如下

    function genData(count) {
        var nameList = [
            '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        var legendData = [];
        var seriesData = [];
        var selected = {};
        for (var i = 0; i < 50; i++) {
            name = Math.random() > 0.65
                ? makeWord(4, 1) + '·' + makeWord(3, 0)
                : makeWord(2, 1);
            legendData.push(name);
            seriesData.push({
                name: name,
                value: Math.round(Math.random() * 100000)
            });
           
    selected[name] = i < 6;
        }

        return {
            legendData: legendData,
            seriesData: seriesData,
            selected: selected
        };

        function makeWord(max, min) {
            var nameLen = Math.ceil(Math.random() * max + min);
            var name = [];
            for (var i = 0; i < nameLen; i++) {
                name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
            }
            return name.join('');
        }
    }

    展开全文
  • as3.0 饼形图 调用xml

    2010-06-27 20:51:12
    as3.0 flash 做的饼形图动态调用xml,形成动态饼状图。
  • 由于项目的原因,需要在WinForm上做出一个饼形统计图的展示效果。相关数据是动态从数据库中获取,相应所占圆的角度计算都... /*3个参数 type:是指需要写柱形图,还是饼形图,后面有个相应的判断 StartTime:是指...

    由于项目的原因,需要在WinForm上做出一个饼形统计图的展示效果。相关数据是动态从数据库中获取,相应所占圆的角度计算都不是难点,可以很快地做出一个饼形统计图。

    但难点在于如何将一些介绍文字插入到相应的弧度上。

    实现的效果如下图所示:

    相应的代码如下:

            /*3个参数
         type:是指需要写柱形图,还是饼形图,后面有个相应的判断
         StartTime:是指统计开始时间
         EndTime:是指统计结束时间 */
    private void Create_Chart(string type, DateTime StartTime, DateTime EndTime) { /*定义3个动态数组,分别储存选项,选项对应数量,选项对应百分比,选项对应的饼图角度,选项累积的总数*/ ArrayList arraylist_type = new ArrayList(); ArrayList arraylist_count = new ArrayList(); ArrayList arraylist_tp = new ArrayList(); ArrayList arraylist_angle = new ArrayList(); /*定义2个int变量,分别储存统计总量,统计的总行数*/ int sum = 0; int resultCount = 0; /*取数据库中的选项,对应数量
         在这里,我采用的Linq 取数据库中的数据,大家如果采用SQL语句的话,直接从数据库操作层返回一个DataSet就可以了,方式类似*/ using (BLLUser a = new BLLUser()) { IList<Unit.HandleCountClass> result = a.Statistics_Handle(type, StartTime, EndTime); resultCount = result.Count; foreach (var item in result) { arraylist_type.Add(item.type.ToString()); arraylist_count.Add(Convert.ToInt32(item.Handlecount)); sum = sum + item.Handlecount; } } //声明宽和高 int width = 470, height = 470; //创建1个Bitmap对象 Bitmap bitmap = new Bitmap(width, height); Graphics g = Graphics.FromImage(bitmap); //使用Clear方法使画布为白色 g.Clear(Color.White); //抗锯齿 g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //高质量的文字 g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit; //像素均偏移0.5个单位,以消除锯齿 g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half; //创建2个画笔对象 Brush brush1 = new SolidBrush(Color.Black); Brush brush2 = new SolidBrush(Color.Orange); Brush brush3 = new SolidBrush(Color.White); //创建Font对象 Font font1 = new Font("Arial", 8); /*计算每个选项所占的百分比*/ for (int i = 0; i < resultCount; i++) { arraylist_tp.Add(Convert.ToSingle(Convert.ToSingle(arraylist_count[i]) * 100 / Convert.ToSingle(sum))); } /*Bar Chart为画柱形图*/ if (com_chart.Text == "Bar Chart") { //绘制显示文字、柱形图 for (int i = 0; i < resultCount; i++) { g.DrawString(arraylist_type[i].ToString() + " :", font1, brush1, new Point(20, 10 + i * 30)); g.FillRectangle(brush2, 130, 10 + i * 30, Convert.ToSingle(arraylist_tp[i]), 17); g.DrawString(arraylist_count[i].ToString() + "条 , " +
                arraylist_tp[i].ToString() + "%", font1, brush1, new Point(135 + Convert.ToInt32(arraylist_tp[i]), 10 + i * 30)); } } /*Pie Chart为画饼形图*/ else if (com_chart.Text == "Pie Chart") { const double T = 3.14; /*Π的常量值*/ double halfangle = 0.0; int piex = 100, piey = 100, piew = 250, pieh = 250; /*计算每个选项所占饼形图的角度*/ for (int i = 0; i < resultCount; i++) { arraylist_angle.Add(Convert.ToSingle(360/Convert.ToSingle(sum)) * Convert.ToSingle(arraylist_count[i])); } //绘制饼形图   for (int i = 0; i < resultCount; i++) { float tem_angle = 0; for (int j = 0; j < i; j++) { tem_angle = tem_angle + Convert.ToSingle(arraylist_angle[j]); }
                
                /*Get_Color(),是一个循环取色的方法,代码在后面*/ g.FillPie(
    new SolidBrush(Get_Color(i)),piex,piey,piew,pieh,tem_angle,Convert.ToSingle(arraylist_angle[i])); /*以下是对四个象限、以及对90度、180度、270度和360度的判断*/ if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 < 90) { halfangle = tem_angle + (Convert.ToSingle(arraylist_angle[i])) / 2; double tem_sin = Math.Sin(T / 180 * halfangle); double tem_cos = Math.Cos(T / 180 * halfangle); int y = Convert.ToInt32(125 * tem_sin); int x = Convert.ToInt32(125 * tem_cos); g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225 + x, 225 + y)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225 + x, 225 + y + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 == 90) { g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225, 225 + 125)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225, 225 + 125 + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 > 90 && tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 < 180) { halfangle = (180 - tem_angle - Convert.ToSingle(arraylist_angle[i]) / 2); double tem_sin = Math.Sin(T / 180 * halfangle); double tem_cos = Math.Cos(T / 180 * halfangle); int y = Convert.ToInt32(125 * tem_sin); int x = Convert.ToInt32(125 * tem_cos); g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225 - x, 225 + y)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225 - x, 225 + y + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 == 180) { g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225 - 125, 225)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225 - 125, 225 + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 > 180 && tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 < 270) { halfangle = (tem_angle - 180 + Convert.ToSingle(arraylist_angle[i]) / 2); double tem_sin = Math.Sin(T / 180 * halfangle); double tem_cos = Math.Cos(T / 180 * halfangle); int y = Convert.ToInt32(125 * tem_sin); int x = Convert.ToInt32(125 * tem_cos); g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225 - x, 225 - y)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225 - x, 225 - y + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 == 270) { g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225, 225 - 125)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225, 225 - 125 + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 > 270 && tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 < 360) { halfangle = (360 - tem_angle - Convert.ToSingle(arraylist_angle[i]) / 2); double tem_sin = Math.Sin(T / 180 * halfangle); double tem_cos = Math.Cos(T / 180 * halfangle); int y = Convert.ToInt32(125 * tem_sin); int x = Convert.ToInt32(125 * tem_cos); g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225 + x, 225 - y)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225 + x, 225 - y + 12)); } else if (tem_angle + Convert.ToSingle(arraylist_angle[i]) / 2 == 360) { g.DrawString(arraylist_type[i].ToString(), font1, brush1, new Point(225 + 125, 225)); g.DrawString((Convert.ToInt32(arraylist_tp[i])).ToString() + "%", font1, brush1, new Point(225 + 125, 225 + 12)); } } }         
           /*需要在界面上拉一个PictureBox控件*/ pictureBox1.Image
    = bitmap; }

     

     

            /*动态取色的函数*/
            private Color Get_Color(int itemindex)
            {
                Color objColor = new Color();
                int remainder = itemindex % 5;
                switch (remainder)
                {
                    case 0:
                        objColor = Color.FromArgb(57, 134, 155);
                    break;
    
                    case 1:
                        objColor = Color.FromArgb(70,161,185);
                    break;
    
                    case 2:
                        objColor = Color.FromArgb(124,187,207);
                    break;
    
                    case 3:
                        objColor = Color.FromArgb(181,212,224);
                    break;
    
                    case 4:
                        objColor = Color.FromArgb(200,230,245);
                    break;
    
                    default:
                        objColor = Color.Yellow;
                    break;                 
                }
                return objColor;
            }

     

     

    转载于:https://www.cnblogs.com/guolebin7/archive/2013/01/16/2862941.html

    展开全文
  • 一个饼形图形报表

    2007-08-13 09:34:00
    最近在做一个统计投票数量的图形报表,主要借鉴了一个51aspx中的一个例子,因为要在一页中显示多个图形,所以选择了在... /// 饼形图形报表 /// </summary> /// <param name="target">Stream对象的实例...

    最近在做一个统计投票数量的图形报表,主要借鉴了一个51aspx中的一个例子,因为要在一页中显示多个图形,所以选择了在pannel中动态添加Image控件.效果图如下:

     
    /// <summary>
            /// 饼形图形报表
            /// </summary>
            /// <param name="target">Stream对象的实例</param>
            /// <param name="p_dt">数据源</param>
            /// <param name="p_strTitle">大标题</param>
            /// <param name="p_strText">小标题字段</param>
            /// <param name="p_strCount">统计数量字段</param>
            public void DrawPic(Stream target,DataTable p_dt,string p_strTitle,string p_strText,string p_strCount)
            {
                //DataTable m_dt = QVoteService.Instance().GetVoteCount(p_strFID);
                float[] angle = new float[p_dt.Rows.Count];
                string[] sTxt = new string[p_dt.Rows.Count];
                float AllCount = 0;

                for (int i = 0; i < p_dt.Rows.Count; i++)
                {
                    DataRow m_dr = p_dt.Rows[i];
                    AllCount += Convert.ToSingle(m_dr[p_strCount].ToString());

                }
                //计算选项在总体中所占的比例
                for (int i = 0; i < p_dt.Rows.Count; i++)
                {
                    DataRow m_dr = p_dt.Rows[i];
                    if (AllCount != 0)
                    {
                        angle[i] = Convert.ToSingle(m_dr[p_strCount].ToString()) * 360.0f / AllCount;
                        sTxt[i] = m_dr[p_strText].ToString() + " " + (Math.Round(Convert.ToSingle(m_dr[p_strCount].ToString()) / AllCount, 2)) * 100 + "%";
                    }
                    else
                    {
                        angle[i] = Convert.ToSingle(1 * 360.0f / p_dt.Rows.Count);
                        sTxt[i] = m_dr[p_strText].ToString() + " " + (Convert.ToSingle(1 / p_dt.Rows.Count)) * 100 + "%";
                    }
                }


                float x = 75.0f, y = 65.0f, d = 100.0f, offset = 15.0f, x1 = 0.0f, y1 = 0.0f;//圆形x,y坐标,半径,偏移距离,x,y方向的偏移值
                float curangle = 0.0f;//当前已转的角度

                int ox = 100, oy =100;//圆心坐标
                int px1 = 0, py1 = 0, px2 = 0, py2 = 0;//直线的端点

                System.Drawing.Image bitmap = new Bitmap(385, 200, System.Drawing.Imaging.PixelFormat.Format32bppPArgb);//建立了一个BitMap对象,它为要创建的图形提供了内存空间
                Graphics g = Graphics.FromImage(bitmap);//产生一个Graphics对象,它封装了GDI+画图接口

                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
                g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

                //20项颜色。
                Color[] color = new Color[]{Color.PapayaWhip,Color.Red,Color.Salmon,Color.Thistle,Color.Blue,Color.Coral,Color.DarkGoldenrod,Color.Black,Color.Firebrick,Color.Gold,Color.Honeydew,Color.Indigo,Color.Khaki,Color.LemonChiffon,Color.Maroon,Color.Navy,
                                             Color.Orange,Color.Violet,Color.Wheat,Color.YellowGreen};

                g.Clear(Color.FromArgb(227, 240,255));//清屏

                StringFormat sf = new StringFormat();
                sf.Alignment = StringAlignment.Center;

                g.DrawString(p_strTitle, new Font(FontFamily.GenericSansSerif,8), new SolidBrush(Color.Black), new RectangleF(0.0f, 10.0f, 420.0f, 20.0f), sf);//标题

                //画右侧的大矩形
                g.FillRectangle(new SolidBrush(Color.FromArgb(128, 128, 128)), 457, 105, 150, (angle.Length + 1) * 12);//阴影
                g.FillRectangle(new SolidBrush(Color.FromArgb(253, 245, 230)), 455, 105, 150, (angle.Length + 1) * 12);//前景
                g.DrawRectangle(new Pen(Color.FromArgb(128, 128, 128), 1), 455, 105, 150, (angle.Length + 1) * 12);//轮廓
                /**/
                /

                for (int i = 0; i < angle.Length; i++)
                {
                    sf.Alignment = StringAlignment.Near;

                    ox = Convert.ToInt32(x + d / 2);
                    oy = Convert.ToInt32(y + d / 2);

                    px1 = Convert.ToInt32((d / 2 + 20) * Math.Cos((curangle + angle[i] / 2) * Math.PI / 180.0f)) + ox;
                    py2 = py1 = Convert.ToInt32((d / 2 + 20) * Math.Sin((curangle + angle[i] / 2) * Math.PI / 180.0f)) + oy;

                    if ((curangle + angle[i] / 2) >= 270 || (curangle + angle[i] / 2) < 90) px2 = px1 + 10;
                    else px2 = px1 - 10;


                    //g.DrawLine(new Pen(Color.FromArgb(120, 120, 120), 1), new Point(ox, oy), new Point(px1, py1));//画直线-标释用。
                    //g.DrawLine(new Pen(Color.FromArgb(120, 120, 120), 1), new Point(px1, py1), new Point(px2, py2));//直线

                    //if ((curangle + angle[i] / 2) >= 270 || (curangle + angle[i] / 2) < 90)
                    //{

                    //    g.DrawString(sTxt[i], new Font(FontFamily.GenericSansSerif, 8), new SolidBrush(Color.FromArgb(120, 120, 120)), px2, py2 - 4, sf);
                    //}
                    //else
                    //{

                    //    g.DrawString(sTxt[i], new Font(FontFamily.GenericSansSerif, 8), new SolidBrush(Color.FromArgb(120, 120, 120)), px2 - sTxt[i].Length * 12 - 2, py2 - 4, sf);
                    //}

                    g.FillPie(new SolidBrush(Color.FromArgb(128, 128, 128)), x + 2, y + 2, d, d, curangle, angle[i]);
                    g.FillPie(new SolidBrush(color[i]), x, y, d, d, curangle, angle[i]);

                    g.DrawPie(new Pen(Color.FromArgb(128, 128, 128),0), x, y, d, d, curangle, angle[i]);
                    curangle += angle[i];

                    //画右侧的小矩形,与文字
                    g.FillRectangle(new SolidBrush(Color.FromArgb(128, 128, 128)), 427, i * 14 + 6 + 58 + 2, 20, 10);//阴影
                    g.FillRectangle(new SolidBrush(color[i]), 207, i * 14 + 6 + 60, 20, 10);//前景
                    g.DrawRectangle(new Pen(Color.FromArgb(120, 120, 120), 1),207, i * 14 + 6 + 60, 20, 10);//轮廓
                    g.DrawString(sTxt[i], new Font(FontFamily.GenericSansSerif,8), new SolidBrush(Color.FromArgb(80, 80, 80)), 227, i * 14 + 6 +60, sf);
                }
                bitmap.Save(target, ImageFormat.Gif);
                bitmap.Dispose();
                g.Dispose();
            }
    ///pannel中动态添加
     DataTable m_dt = 数据源
                for (int i = 0; i < m_dt.Rows.Count;i++ )
                {
                    Image m_img = new Image();
                    m_img.Style.Add("margin-top", "5px");
                    m_img.Style.Add("float","left");
                    m_img.Style.Add("margin-left","5px");
                    m_img.ImageUrl = "GraphicStatements.aspx?FID=" + m_dt.Rows[i]["FID"].ToString()+"&&FTitle="+Server.UrlEncode(m_dt.Rows[i]["FTitle"].ToString());
                    Panel1.Controls.Add(m_img);
                }

    转载于:https://www.cnblogs.com/JustDI/archive/2007/08/13/853213.html

    展开全文
  • 数据统计 h5 > 2 < div class ="chart" id ="barChart" > div > 3 < h5 style ="text-align: center;" > 条形数据统计 h5 > 4 < div class ="chart" id ="lineChart" > div > 5 < h5 ...

    一、去Echarts引入JS 网址:http://echarts.baidu.com/download.html   

    echarts-all.js

    二、下面这些是我实际用到的SQL,有几个地方也需要记一下,正好放在这儿了,查询结果一定是  名称 and 值

     

     1 /*=============================主题====================================================
     2  已有全APP主题数量 时间段发布数量 select COUNT(id) from app_user_theme 
     3 
     4  1.发布主题数量前五的主题 select TABLE_A.themeName,TABLE_A.counts from 
     5 (select aut.themeId,aut.themeName,count(*) as counts from app_user_theme aut GROUP BY aut.themeId,aut.themeName)
     6 TABLE_A ORDER BY TABLE_A.counts desc 
     7 
     8  2.发布主题数量最多的城市
     9  select ar.adName as statisticsName,COUNT(*)AS counts from app_user as ar 
    10             left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries 
    11             where 1=1 and aut.createDate>'2017-12-17 00:00:00'
    12             GROUP BY ar.adName ORDER BY COUNT(*) desc*/
    13 
    14   
    15 
    16  /*3.每一个时间段发布主题的数量 select HOUR(createDate) as statisticsName, count(*) as counts 
    17             from app_user_theme group by statisticsName ORDER BY counts desc 
    18 
    19 全APP主题感兴趣的数量 时间段感兴趣的数量 select COUNT(id) from app_user_theme_interestion 
    20 
    21 全APP主题订单的数量 时间段主题订单数量 select COUNT(*) from app_user_theme_order
    22 
    23 ==============================用户==================================================
    24 
    25 
    26 
    27 全APP用户数量 时间段注册数量 select COUNT(id) from app_user */
    28 
    29  /*1.APP用户最多的城市
    30 select TABLE_A.adName as statisticsName,TABLE_A.adCode,TABLE_A.counts from (select ar.adName,ar.adCode,COUNT(*)AS counts 
    31 from app_user ar where 1=1
    32  and ar.createTime >= trim('2017-06-06 00:00:00') 
    33 GROUP BY ar.adCode,ar.adName)TABLE_A ORDER BY TABLE_A.counts DESC */
    34 
    35  /*2.发布主题人群的职业统计
    36 select ar.professionName as statisticsName,COUNT(*)AS counts from app_user as ar 
    37 left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries where ar.professionName!=''
    38 GROUP BY ar.professionName ORDER BY COUNT(*) desc 
    39 
    40  3.发布主题人群的学历统计
    41 select ar.educationName as statisticsName,COUNT(*)AS counts from app_user as ar 
    42 left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries where ar.educationName!=''
    43 and aut.createDate >= trim('2017-12-04 00:00:00')
    44 and aut.createDate <= trim('2017-12-30 00:00:00')
    45 GROUP BY ar.educationName ORDER BY COUNT(*) desc */
    46 
    47 /* 4.发布主题人群的性别统计 
    48

    select CASE ar.sex WHEN 0 THEN '男' ELSE '女' END as statisticsName,COUNT(*)AS counts from app_user as ar
    left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries where ar.educationName!=''

    50 and aut.createDate>'2017-02-01 00:00:00'
    51 GROUP BY ar.sex ORDER BY COUNT(*) desc */

    三、controller代码 饼图数据格式单独整理,柱形和条形用的是同一种数据格式。

    /**
             * 主题城市统计
             * @user  Anear   
             * @time  上午11:29:38
             */
            @ResponseBody
            @RequestMapping("/*****")
            public Map<String, Object> themeCityStatistics(String statisticsType,String startTime,String endTime,String pageNo,HttpServletRequest request,HttpServletResponse response,ModelMap model){
                PageProperty pp = new PageProperty();
                Integer pageNum = 0;
                Integer pageSizeNum =20;
                if (!"".equals(pageNo)) {
                    pageNum = Utils.parseInt(pageNo, 1); // 将字符串数字转化为int型数字,把pageNo传进去,转换为整型,默认为1
                }
                pp.setNpage(pageNum);
                pp.setNpagesize(pageSizeNum);
                pp.putParamMap("startTime", startTime);
                pp.putParamMap("endTime", endTime);
                
                PageList<AppUserTheme> appPageList = new PageList<AppUserTheme>();
                
    
                  Map<String, Object> resultMap=new HashMap<String, Object>();
                  String shuoming = "主题数量";
                if (statisticsType.equals("0")) {
                    appPageList = hourThemeCount(pp);//时间段发布主题数量统计
                }else if (statisticsType.equals("1")){
                    appPageList = getIssueThemeCount(pp);//发布主题数量统计 降序 
                }else {
                      appPageList = cityThemeCount(pp);//获取发布主题城市统计 降序 默认显示
                }
                resultMap.clear();
                  
                  String strings = "";
                  String interString = "";
                  if (appPageList.getRecords().size()>=1) {//如果查询到了数据
                      for (AppUserTheme appUserTheme : appPageList.getRecords()) {
                        strings += ""+appUserTheme.getStatisticsName()+",";
                        interString += appUserTheme.getCounts()+",";
                    }
                      //String [] ssStrings = strings.split(",");
                      String[] strarr = interString.split(",");
                      
                      int[] table_ids = new int[strarr.length];
                      for(int i=0;i<strarr.length;i++){
                          table_ids[i]=Integer.parseInt(strarr[i]);
                      }
                      appPageList.setValues(table_ids);
                  }else {
                    strings += "暂无";
                    int[] table_ids = {0};
                      appPageList.setValues(table_ids);
                }
                
                List<JSONObject>  data=new ArrayList<JSONObject>(); //阿里巴巴的jar  饼图
                JSONObject tp=null;
                for (int i = 0; i < appPageList.getRecords().size(); i++) {
                    tp=new JSONObject();
                    tp.put("value", appPageList.getRecords().get(i).getCounts());
                    tp.put("name", appPageList.getRecords().get(i).getStatisticsName());
                    data.add(tp);
                }
                  appPageList.setMap(data);
                  
                  appPageList.setShuoming(shuoming);
                  appPageList.setCategories(strings.split(","));
                  appPageList.setCount(appPageList.getRecords().size());
                  resultMap.put("pageList", appPageList.getRecords());
                  resultMap.put("apppageList", appPageList);
                  
                
                
                return resultMap;
            }

                另外
    PageList 需要添加以下这几个属性
    
    
    
    

                  

              private String[] categories;//x轴数组
              private int[] values;//y轴数组
              private String shuoming;//说明
              private int count;//条数

              private List<JSONObject> map;

     

    四、JSP、HTML代码 and JS

    1                       <h5 style="text-align: center;"> 柱图数据统计</h5>
    2                                     <div class="chart" id="barChart"></div>
    3                                     <h5 style="text-align: center;"> 条形数据统计</h5>
    4                                     <div class="chart" id="lineChart"></div>
    5                                     <h5 style="text-align: center;"> 饼图数据统计</h5>
    6                                     <div class="chart" id="pieChart"></div>
      1 function gradeChange(){
      2            var sel = document.getElementById("pid");
      3            var selected_val = sel.options[sel.selectedIndex].value;
      4            var startTime = document.getElementById("startTime").value;
      5            var endTime = document.getElementById("endTime").value;
      6            $.ajax({
      7                 type : "post",
      8                 url : "${ctx}/appUserTheme/themeCityStatistics",
      9                 data : {"statisticsType" : selected_val,
     10                     "startTime" : startTime,
     11                     "endTime" : endTime},
     12                 dataType : "json",
     13                 error : function(XMLHttpRequest, textStatus, errorThrown) {
     14                     layer.open({
     15                         title : '提示',
     16                         content : "网络异常,稍后再试"
     17                     });
     18                 },
     19                 success : function(data) {
     20                     var getOption = function(chartType) {
     21                         var chartOption = chartType == 'pie' ? {
     22                             calculable: false,
     23                             series: [{
     24                                 name: '访问来源',
     25                                 type: 'pie',
     26                                 radius: '65%',
     27                                 center: ['50%', '50%'],
     28                                 itemStyle:{ 
     29                                     normal:{ 
     30                                           label:{ 
     31                                             show: true, 
     32                                             formatter: '{b} : {c} ({d}%)' 
     33                                           }, 
     34                                           labelLine :{show:true} 
     35                                         } 
     36                                     }, 
     37                                 data: data.apppageList.map 
     38                             }]
     39                         } : {
     40                             legend: {
     41                                 data: [data.apppageList.shuoming]
     42                             },
     43                             grid: {
     44                                 x: 35,
     45                                 x2: 10,
     46                                 y: 30,
     47                                 y2: 25
     48                             },
     49                             toolbox: {
     50                                 show: false,
     51                                 feature: {
     52                                     mark: {
     53                                         show: true
     54                                     },
     55                                     dataView: {
     56                                         show: true,
     57                                         readOnly: false
     58                                     },
     59                                     magicType: {
     60                                         show: true,
     61                                         type: ['line', 'bar']
     62                                     },
     63                                     restore: {
     64                                         show: true
     65                                     },
     66                                     saveAsImage: {
     67                                         show: true
     68                                     }
     69                                 }
     70                             },
     71                             calculable: false,
     72                             xAxis: [{
     73                                 type: 'category',
     74                                 data: data.apppageList.categories
     75                                 
     76                             }],
     77                             yAxis: [{
     78                                 type: 'value',
     79                                 splitArea: {
     80                                     show: true
     81                                 }
     82                             }],
     83                             series: [{
     84                                 name: data.apppageList.shuoming,
     85                                 type: chartType,
     86                                 data: data.apppageList.values,
     87                                 itemStyle: {  
     88                                 normal: {  
     89                                     label: {  
     90                                         show: true,//是否展示  
     91                                         textStyle: {  
     92                                             fontWeight:'bolder',  
     93                                             fontSize : '12',  
     94                                             fontFamily : '微软雅黑',  
     95                                         }  
     96                                     }  
     97                                 }  
     98                             },
     99                             }]
    100                         };
    101                         return chartOption;
    102                     };
    103                     var byId = function(id) {
    104                         return document.getElementById(id);
    105                     };
    106 
    107                     var crmHtmlr2 = '';
    108                     var index = 0;
    109                     var m = data.apppageList.count;
    110                     $.each(data,function(i,aaa){
    111                         $.each(aaa,function(n,comment){
    112                             index ++;
    113                             crmHtmlr2 +="<tr style='text-align: center;'><td><input type='checkbox' class='ids' value='${item.id }'/></td><td>"+index+"</td><td>"+comment.statisticsName+"</td><td>"+comment.counts+"</td></tr>";
    114 
    115                             if(parseInt(m) <= parseInt(index)) {
    116                                 return false;
    117                             }
    118                         });
    119                     });
    120                     $('#statisticsBody').html(crmHtmlr2);
    121                     
    122                     var barChart = echarts.init(byId('barChart'));
    123                     barChart.setOption(getOption('bar'));
    124                     var lineChart = echarts.init(byId('lineChart'));
    125                     lineChart.setOption(getOption('line'));
    126                     var pieChart = echarts.init(byId('pieChart'));
    127                     pieChart.setOption(getOption('pie'));
    128                     
    129                     byId("echarts").addEventListener('tap',function(){
    130                         var url = this.getAttribute('data-url');
    131                         plus.runtime.openURL(url);
    132                     },false);
    133                 }
    134             });
    135        }

    五、查看效果

     

     

     

    转载于:https://www.cnblogs.com/anpieBlog/p/8058079.html

    展开全文
  • 本文以柱形图和饼形图ajax动态赋值为例 一、饼形图赋值步骤 (1)jsp页面 <!-- 引入echarts官方js --> [removed][removed] <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> ...
  • Ajax 是指一种创建交互式网页应用的网页...一起跟随小编过来看看吧本文以柱形图和饼形图ajax动态赋值为例一、饼形图赋值步骤(1)jsp页面[html] view plain copy(2)js页面//饼图模板var dom = document.getElementByI...
  • 仿随手记饼状动态图

    2021-03-18 01:56:24
    仿随手记饼状动态图是一个模仿金蝶随手记饼形统计的小例子,使用的素材也是直接反编译随手记的图片,但源码作者自己写的,例子可以按住转动,话说我十分想把这个例子做成GIF呈现给大家,不过找了很久没有找到合适...
  • 一款网站流量统计中的圆饼图表效果,本效果基于HTML5 canvas技术实现,带动画效果,鼠标放在饼图上,可显示对应的提示信息,饼形图在实际应用中,可结合数据库来生成的动态的数据统计图表,本例中的数据是静态的,...
  • 套餐预约占比饼形图1.1 需求分析1.2 完善页面1.3后端代码2. 运营数据统计2.1 需求分析2.2完善页面2.3 Controller3. 运营数据统计报表导出3.1 需求分析3.2 提供模板文件3.3 完善页面3.4 后台代码权限控制菜单动态...
  • 仿随手记饼状动态图是一个模仿金蝶随手记饼形统计的小例子,使用的素材也是直接反编译随手记的图片,但源码作者自己写的,例子可以按住转动,话说我十分想把这个例子做成GIF呈现给大家,不过找了很久没有找到合适...
  • 本例子是一个模仿金蝶随手记饼形统计的小例子,使用的素材也是直接反编译随手记的图片,但源码作者自己写的,例子可以按住转动,话说我十分想把这个例子做成GIF呈现给大家,不过找了很久没有找到合适的录屏软件,...
  • 公司内部代码,因此只记录核心算法,方便以后查找,不喜勿看 /** * 开始画饼图❀ */ private function drawTrafficLightPlotChart():void { currentPercent = 0; // 删除之前的 for eac
  • 2.JFreeChart组件可以生成各种各样的图形报表,如常用的柱形图、区域图、饼形图、折线图、时序图、甘特图等;而对于同一种类型的图表,JFreeChart组件还提供了不同的表现方式、 使用jFreeChart首先需要下载两个jar
  • C#中GDI图形图像编程

    2010-07-23 17:34:42
    C#+统计图-柱形图+饼形图+折线图,使用ZedGraph制作动态更新的统计图,图表基本教程篇,以及GDI画图的相关资料
  • 跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用,提供饼形图、扇形图、折线图、柱状图等多种报表的2D、3D动态形式生成,安全、好看、简单...
  • 动态图表制作小工具

    2019-01-06 19:40:12
    绿色免安装小工具 swiff chart是一款专业的可以帮助用户绘制各种动态统计图表的统计图表绘制工具。还想看着Excel那个死板板的图表...同时软件还可以创建多种统计,包括饼形统计等操作,是一款非常不错的绘制工具。
  • PPT模板内容包含文本框,目录,折线图,饼形图,以及并列关系,陈述说明等PPT背景图片。本套动态PPT模板带炫酷动画适合用来制作动态国际贸易商务PowerPoint。 关键词:灰色PPT背景,人物、建筑PowerPoint背景图片,...
  • JFreeChart绘图源码

    2011-09-22 22:18:10
    是为applications, applets, servlets 以及JSP等使用所设计,自己写的JFreeChart绘图,绘制饼形图和柱状图源码,直接部署项目就可以运行,把我随机赋得值换成从数据库查询的值就可以实现动态绘图了,绘图具体步骤...
  • PPT模板封面在草原麦田之上设计了蓝色蒙版,内容结合论文绪论、研究背景、研究方法、研究结果、问题讨论、论文总结等方面设计了一系列幻灯片图表,其中包含中国地图,扩散关系,循环关系,饼形图,条形图等一系列PPT...
  • jfreechart实现动态图表

    千次阅读 2018-05-28 15:15:21
    1.生成图形报表时一般使用制图工厂ChartFatory类进行创建,只有创建制图对象jfreechart后才能生成实际图片,然后可以设置图片边界,字体等属性 2.数据集合是用来装载绘图表所...3–1.pieplot类:用来绘制饼形图 ...
  • 统计图的联动是指统计图之间的数据根据点击图形上的不同区域(例如柱形图中的柱子,饼形图中的图块)来做动态变化. 通常情况下,我们在报表中放入统计图是为了对数据进行展现,那么,我们如何来利用统计图来完成联动功能...
  • 它的功能就是可以根据输入的数据,或直接导入CSV、XLS、TXT文件中的数据,动态绘制出各种常见的统计,如:条形统计饼形统计、折线统计等,最后可将统计输出为SWF格式,而整个过程只需要简单的六步就能...
  • 统计联动刷新功能

    2012-08-08 09:12:23
    统计图的联动是指统计图之间的数据根据点击图形上的不同区域(例如柱形图中的柱子,饼形图中的图块)来做动态变化. 通常情况下,我们在报表中放入统计图是为了对数据进行展现,那么,我们如何来利用统计图来完成联动功能...
  • Echarts动态数据加载

    2019-04-09 17:24:18
    饼形图 html页面: <script src="../scripts/echarts.min.js" type="text/javascript"></script> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width:100%; height...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 151
精华内容 60
关键字:

饼形图动态的