js圖表控制元件：highcharts的應用

    用圖表來表示資料，能夠使我們以直觀的方式來獲取更多的資訊，這也是很多專案中會用到的技術。最近，公司讓做個餅形圖，研究了幾天的時間，小有成果，在此與大家分享一下。

    highcharts效果展示圖網址：

    餅形圖。

    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
     
      6
   
   
      20
     
      1
   
   
      20
     
      1
   
   
      20
     
      1
   
   
      20
     
      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);
           
        }