js图表控件：highcharts的应用
用图表来表示数据，能够使我们以直观的方式来获取更多的信息，这也是很多项目中会用到的技术。最近，公司让做个饼形图，研究了几天的时间，小有成果，在此与大家分享一下。
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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Scripts/jquery.min.js" type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Scripts/exporting.js" type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Scripts/highcharts.js" type="text/javascript"></script>
<div id="container" ></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);
}
共同学习，写下你的评论
评论加载中...
作者其他优质文章
