ITPub博客

首页 > IT职业 > IT生活 > js图表控件:highcharts的应用

js图表控件:highcharts的应用

IT生活 作者:z_paul 时间:2021-09-09 10:00:14 0 删除 编辑

    用图表来表示数据,能够使我们以直观的方式来获取更多的信息,这也是很多项目中会用到的技术。最近,公司让做个饼形图,研究了几天的时间,小有成果,在此与大家分享一下。

    highcharts效果展示图网址:http://www.highcharts.com/demo。

    饼形图。

    xml数据源:

   

 
    2
   
   
      1
      全站源码
      110
   

   
      2
      新闻文章
      20
   

   
      3
      博客论坛
      123
   

   
      4
      影音视频
      28
   

   
      5
      上传下载
      100
   

   
      6
      功能源码
      100
   

   
      7
      投票调查
      200
   

   
      8
      聊天计数
      140
   

   
      9
      行政办公
      180
   

   
      10
      天龙八部
      200
   

   
      11
      神雕侠侣
      200
   

   
      12
      碧血剑
      200
   

   
      13
      王重阳
      100
   

   
      14
      张无忌至武当山
      100
   

   
      15
      张三丰
      100
   

   
      16
      张翠山
      5
   

   
      17
      金毛狮王
      1
   

   
      18
      紫衫龙王
      2
   

   
      19
      紫衫龙王2
      6
   

   
      20
      紫衫龙王3
      1
   

   
      20
      紫衫龙王4
      1
   

   
      20
      紫衫龙王5
      1
   

   
      20
      紫衫龙王6
      1
   

 

    前台代码:

   





   
   
   
   


   

       
       
   

   


 

     后台代码:

     protected string str = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            LoadData();
        }
        protected void LoadData()
        {
            XmlDocument myDoc = new XmlDocument();
            myDoc.Load(Server.MapPath("DB_51aspx.xml"));

            XmlNode xn = myDoc.SelectSingleNode("//VoteInfo[ID='2']");//读取数据源

            XmlNodeList xnl = xn.SelectNodes("Item");


            double[] angle = new double[xnl.Count];//百分比
            string[] angle2 = new string[xnl.Count];
            string[] sTxt = new string[xnl.Count];//名称
            decimal[] data = new decimal[xnl.Count];//数量
            double AllCount = 0;//总数

            for (int i = 0; i             {
                AllCount += Convert.ToSingle(xnl.Item(i).SelectSingleNode("Count").InnerText);
            }
            double sum = 0;
            for (int i = 0; i             {
                XmlNode xn0 = xnl.Item(i);
                if (i != xnl.Count - 1)
                {
                    angle[i] = Convert.ToDouble((Convert.ToDouble(xn0.SelectSingleNode("Count").InnerText) / AllCount * 100).ToString("#,##0.00"));//所占百分比
                    sum += angle[i];
                    angle2[i] = (Convert.ToDouble(xn0.SelectSingleNode("Count").InnerText) / AllCount * 100).ToString("#,##0.00");
                }
                else
                {
                    angle[i] = Convert.ToDouble((100 - sum).ToString("#,##0.00"));
                    angle2[i] = (100 - sum).ToString("#,##0.00");
                }
                sTxt[i] = xn0.SelectSingleNode("Title").InnerText;
                data[i] = Convert.ToDecimal(xn0.SelectSingleNode("Count").InnerText);
                str += "[" + "'" + sTxt[i] + ":" + data[i] + "(元)'," + data[i] + "]" + ",";
            }
            str = str.Remove(str.Length - 1, 1);
           
        }

 


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/75/viewspace-2814975/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: 数据流动图
下一篇: 学习面试题Day09
请登录后发表评论 登录
全部评论

注册时间:2019-07-17

  • 博文量
    151
  • 访问量
    6019