用图表来表示数据，能够使我们以直观的方式来获取更多的信息，这也是很多项目中会用到的技术。最近，公司让做个饼形图，研究了几天的时间，小有成果，在此与大家分享一下。
highcharts效果展示图网址：http://www.highcharts.com/demo。
饼形图。
xml数据源：
<?xml version="1.0" encoding="utf-8"?>
<Vote> <VoteInfo> <ID>2</ID> <VoteTitle></VoteTitle> <Item> <VoteID>1</VoteID> <Title>全站源码</Title> <Count>110</Count> </Item> <Item> <VoteID>2</VoteID> <Title>新闻文章</Title> <Count>20</Count> </Item> <Item> <VoteID>3</VoteID> <Title>博客论坛</Title> <Count>123</Count> </Item> <Item> <VoteID>4</VoteID> <Title>影音视频</Title> <Count>28</Count> </Item> <Item> <VoteID>5</VoteID> <Title>上传下载</Title> <Count>100</Count> </Item> <Item> <VoteID>6</VoteID> <Title>功能源码</Title> <Count>100</Count> </Item> <Item> <VoteID>7</VoteID> <Title>投票调查</Title> <Count>200</Count> </Item> <Item> <VoteID>8</VoteID> <Title>聊天计数</Title> <Count>140</Count> </Item> <Item> <VoteID>9</VoteID> <Title>行政办公</Title> <Count>180</Count> </Item> <Item> <VoteID>10</VoteID> <Title>天龙八部</Title> <Count>200</Count> </Item> <Item> <VoteID>11</VoteID> <Title>神雕侠侣</Title> <Count>200</Count> </Item> <Item> <VoteID>12</VoteID> <Title>碧血剑</Title> <Count>200</Count> </Item> <Item> <VoteID>13</VoteID> <Title>王重阳</Title> <Count>100</Count> </Item> <Item> <VoteID>14</VoteID> <Title>张无忌至武当山</Title> <Count>100</Count> </Item> <Item> <VoteID>15</VoteID> <Title>张三丰</Title> <Count>100</Count> </Item> <Item> <VoteID>16</VoteID> <Title>张翠山</Title> <Count>5</Count> </Item> <Item> <VoteID>17</VoteID> <Title>金毛狮王</Title> <Count>1</Count> </Item> <Item> <VoteID>18</VoteID> <Title>紫衫龙王</Title> <Count>2</Count> </Item> <Item> <VoteID>19</VoteID> <Title>紫衫龙王2</Title> <Count>6</Count> </Item> <Item> <VoteID>20</VoteID> <Title>紫衫龙王3</Title> <Count>1</Count> </Item> <Item> <VoteID>20</VoteID> <Title>紫衫龙王4</Title> <Count>1</Count> </Item> <Item> <VoteID>20</VoteID> <Title>紫衫龙王5</Title> <Count>1</Count> </Item> <Item> <VoteID>20</VoteID> <Title>紫衫龙王6</Title> <Count>1</Count> </Item> </VoteInfo> </Vote>前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="hhh.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery.min.js" type="text/javascript"></script> <script src="Scripts/highcharts.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: ' ' }, tooltip: {//鼠标事件 formatter: function () { return '<b>' + this.point.name + '</b>: ' + changeTwoDecimal_f(this.percentage) + ' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function () { return '<b>' + this.point.name + '</b>: ' + changeTwoDecimal_f(this.percentage) + ' %'; } } } }, series: [{ type: 'pie', //生成图表的种类 name: 'Browser share', data: //数据源 [<%=str %>] }] }); }); //截取 changeTwoDecimal_f = function (floatvar) { var f_x = parseFloat(floatvar); if (isNaN(f_x)) { alert('function:changeTwoDecimal->parameter error'); return false; } var f_x = Math.round(floatvar * 100) / 100; var s_x = f_x.toString(); var pos_decimal = s_x.indexOf('.'); if (pos_decimal < 0) { pos_decimal = s_x.length; s_x += '.'; } while (s_x.length <= pos_decimal + 2) { s_x += '0'; } return s_x; } }); </script> </head> <body> <div> <script src="Scripts/exporting.js" type="text/javascript"></script> <script src="Scripts/highcharts.js" type="text/javascript"></script> <div id="container" style="min-width:300px;height:300px; margin-left:auto; margin-right:auto;"></div> </div> </body> </html>
后台代码：
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 < xnl.Count; i++) { AllCount += Convert.ToSingle(xnl.Item(i).SelectSingleNode("Count").InnerText); } double sum = 0; for (int i = 0; i < xnl.Count; 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); }
效果图展示：