利用ajax做的柱状图，线性统计图，饼状图
柱状图，两个不同类型的数据
以下是html页面代码
<!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="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/tuxing.js" type="text/javascript"></script>
<script type="text/javascript">
function clis() {
coundan();
Dindan();
} //柱状
function coundan() {
var tu = $("#dd1").val();
var ends = $("#dd2").val();
// alert(tu);
// alert(ends);
$.ajax({
type: "POST",
url: "CountShow.aspx",
data: {
method: "dan",
str: tu,
end: ends
},
datatype: 'json',
success: function (r) {
alert(r);
if (r.length > ) {
var r = $.parseJSON(r);
alert(r);
ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) { },
complete: function (XMLHttpRequest, textStatus) { }
});
}
//饼型
function Dindan() {
var tu = $("#dd1").val();
var ends = $("#dd2").val();
$.ajax({
type: "POST",
url: "CountShow.aspx",
data: {
method: "bingdan",
str: tu,
end: ends
},
datatype: 'json',
success: function (r) {
if (r.length > ) {
var r = $.parseJSON(r);
Bing("binlist", "订单总额比例", "单数", r,"金额",r);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) { },
complete: function (XMLHttpRequest, textStatus) { }
});
} </script>
<style type="text/css">
.cs
{
width: 65px;
}
.td
{
width:500px;
height:400px; }
</style>
</head>
<body style="overflow: scroll">
<input type="text"" id="dd1" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" class="cs" /> <input type="text" id="dd2" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" class="cs" /> <button id="bbt" onclick="clis()">
查询</button>
<div id="tongdan" class="td">
</div>
<div id="binlist" class="td">
</div>
</body>
</html>
js引用文件 其他的几个js文件可以去这个网址下载（http://www.hcharts.cn/demo/index.php?p=27），上面还有很多不同类型的统计（包括源代码）
/*
* My97 DatePicker 4.5
* SITE: http://dp.my97.net
* BLOG: http://my97.cnblogs.com
* downlod:http://www.codefans.net
* MAIL: smallcarrot@163.com
*/
var $dp,WdatePicker;
(function(R){var $={
$wdate:true,
$dpPath:"",
$crossFrame:true,
position:{},
lang:"auto",
skin:"default",
dateFmt:"yyyy-MM-dd",
realDateFmt:"yyyy-MM-dd",
realTimeFmt:"HH:mm:ss",
realFullFmt:"%Date %Time",
minDate:"1900-01-01 00:00:00",
maxDate:"2099-12-31 23:59:59",
startDate:"",
alwaysUseStartDate:false,
yearOffset:,
isShowWeek:false,
highLineWeekDay:true,
isShowClear:true,
isShowToday:true,
isShowOthers:true,
readOnly:false,
errDealMode:,
autoPickDate:null,
qsEnabled:true, disabledDates:null,disabledDays:null,opposite:false,onpicking:null,onpicked:null,onclearing:null,oncleared:null,eCont:null,vel:null,errMsg:"",quickSel:[],has:{}};WdatePicker=T;var W=window,O="document",J="documentElement",C="getElementsByTagName",U,A,S,I,a;switch(navigator.appName){case"Microsoft Internet Explorer":S=true;break;case"Opera":a=true;break;default:I=true;break}A=L();if($.$wdate)M(A+"skin/WdatePicker.css");U=W;if($.$crossFrame){try{while(U.parent[O]!=U[O]&&U.parent[O][C]("frameset").length==)U=U.parent}catch(P){}}if(!U.$dp)U.$dp={ff:I,ie:S,opera:a,el:null,win:W,status:,defMinDate:$.minDate,defMaxDate:$.maxDate,flatCfgs:[]};Q=U.$dp;if(Q.status==)Y(W,function(){T(null,true)});if(!W[O].docMD){E(W[O],"onmousedown",D);W[O].docMD=true}if(!U[O].docMD){E(U[O],"onmousedown",D);U[O].docMD=true}E(W,"onunload",function(){if(Q.dd)Q.dd.style.display="none"});function B(){U.$dp=U.$dp||{};obj={$:function($){return(typeof $=="string")?this.win[O].getElementById($):$},$D:function($,_){return this.$DV(this.$($).value,_)},$DV:function(_,$){if(_!=""){this.dt=Q.cal.splitDate(_,Q.cal.dateFmt);if($)for(var A in $){if(this.dt[A]===undefined)this.errMsg="invalid property:"+A;this.dt[A]+=$[A]}if(this.dt.refresh())return this.dt}return""},show:function(){if(this.dd)this.dd.style.display="block"},hide:function(){if(this.dd)this.dd.style.display="none"},attachEvent:E};for(var $ in obj)U.$dp[$]=obj[$];Q=U.$dp}function E(A,$,_){if(S)A.attachEvent($,_);else{var B=$.replace(/on/,"");_._ieEmuEventHandler=function($){return _($)};A.addEventListener(B,_._ieEmuEventHandler,false)}}function L(){var _,A,$=document.getElementsByTagName("script");for(var B=;B<$.length;B++){_=$[B].src.substring(,$[B].src.toLowerCase().indexOf("wdatepicker.js"));A=_.lastIndexOf("/");if(A>)_=_.substring(,A+);if(_)break}return _}function F(F){var E,C;if(F.substring(,)!="/"&&F.indexOf("://")==-){E=U.location.href;C=location.href;if(E.indexOf("?")>-)E=E.substring(,E.indexOf("?"));if(C.indexOf("?")>-)C=C.substring(,C.indexOf("?"));var _="",D="",A="",H,G,B="";for(H=;H<Math.max(E.length,C.length);H++)if(E.charAt(H).toLowerCase()!=C.charAt(H).toLowerCase()){G=H;while(E.charAt(G)!="/"){if(G==)break;G-=}_=E.substring(G+,E.length);_=_.substring(,_.lastIndexOf("/"));D=C.substring(G+,C.length);D=D.substring(,D.lastIndexOf("/"));break}if(_!="")for(H=;H<_.split("/").length;H++)B+="../";if(D!="")B+=D+"/";F=location.href.substring(,location.href.lastIndexOf("/")+)+B+F}$.$dpPath=F}function M(B,$,D){var A=W[O],E=A[C]("HEAD").item(),_=A.createElement("link");_.href=B;_.rel="stylesheet";_.type="text/css";if($)_.title=$;if(D)_.charset=D;E.appendChild(_)}function Y($,_){E($,"onload",_)}function G($){$=$||U;var A=,_=;while($!=U){var D=$.parent[O][C]("iframe");for(var F=;F<D.length;F++){try{if(D[F].contentWindow==$){var E=V(D[F]);A+=E.left;_+=E.top;break}}catch(B){}}$=$.parent}return{"leftM":A,"topM":_}}function V(E){if(S)return E.getBoundingClientRect();else{var A={ROOT_TAG:/^body|html$/i,OP_SCROLL:/^(?:inline|table-row)$/i},G=null,_=E.offsetTop,F=E.offsetLeft,D=E.offsetWidth,B=E.offsetHeight,C=E.offsetParent;if(C!=E)while(C){F+=C.offsetLeft;_+=C.offsetTop;if(C.tagName.toLowerCase()=="body")G=C.ownerDocument.defaultView;C=C.offsetParent}C=E.parentNode;while(C.tagName&&!A.ROOT_TAG.test(C.tagName)){if(C.scrollTop||C.scrollLeft)if(!A.OP_SCROLL.test(C.style.display))if(!a||C.style.overflow!=="visible"){F-=C.scrollLeft;_-=C.scrollTop}C=C.parentNode}var $=Z(G);F-=$.left;_-=$.top;D+=F;B+=_;return{"left":F,"top":_,"right":D,"bottom":B}}}function N($){$=$||U;var _=$[O];_=_[J]&&_[J].clientHeight&&_[J].clientHeight<=_.body.clientHeight?_[J]:_.body;return{"width":_.clientWidth,"height":_.clientHeight}}function Z($){$=$||U;var B=$[O],A=B[J],_=B.body;B=(A&&A.scrollTop!=null&&(A.scrollTop>_.scrollLeft||A.scrollLeft>_.scrollLeft))?A:_;return{"top":B.scrollTop,"left":B.scrollLeft}}function D($){src=$?($.srcElement||$.target):null;if(Q&&!Q.eCont&&Q.dd&&Q.dd.style.display=="block"&&src!=Q.el)Q.cal.close()}function X(){Q.status=;H()}function H(){if(Q.flatCfgs.length>){var $=Q.flatCfgs.shift();$.el={innerHTML:""};$.autoPickDate=true;$.qsEnabled=false;K($)}}var R,_;function T(E,$){B();Q.win=W;E=E||{};if($){if(!D()){_=_||setInterval(function(){if(U[O].readyState=="complete")clearInterval(_);T(null,true)},);return}if(Q.status==){Q.status=;K({el:{innerHTML:""}},true)}else return}else if(E.eCont){E.eCont=Q.$(E.eCont);Q.flatCfgs.push(E);if(Q.status==)H()}else{if(Q.status==)Q.status=;if(Q.status!=)return;var C=A();if(C){Q.srcEl=C.srcElement||C.target;C.cancelBubble=true}E.el=Q.$(E.el||Q.srcEl);if(!E.el||E.el&&E.el.disabled||(E.el==Q.el&&Q.dd.style.display!="none"&&Q.dd.style.left!="-1970px"))return;K(E)}function D(){if(S&&U!=W&&U[O].readyState!="complete")return false;return true}function A(){if(I){func=A.caller;while(func!=null){var $=func.arguments[];if($&&($+"").indexOf("Event")>=)return $;func=func.caller}return null}return event}}function K(E,_){for(var D in $)if(D.substring(,)!="$")Q[D]=$[D];for(D in E)if(Q[D]===undefined)Q.errMsg="invalid property:"+D;else Q[D]=E[D];Q.elProp=Q.el&&Q.el.nodeName=="INPUT"?"value":"innerHTML";if(Q.el[Q.elProp]==null)return;if(Q.lang=="auto")Q.lang=S?navigator.browserLanguage.toLowerCase():navigator.language.toLowerCase();if(!Q.dd||Q.eCont||(Q.lang&&Q.realLang&&Q.realLang.name!=Q.lang&&Q.getLangIndex&&Q.getLangIndex(Q.lang)>=)){if(Q.dd&&!Q.eCont)U[O].body.removeChild(Q.dd);if($.$dpPath=="")F(A);var B="<iframe src=\""+$.$dpPath+"My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>";if(Q.eCont){Q.eCont.innerHTML=B;Y(Q.eCont.childNodes[],X)}else{Q.dd=U[O].createElement("DIV");Q.dd.style.cssText="position:absolute;z-index:19700";Q.dd.innerHTML=B;U[O].body.appendChild(Q.dd);Y(Q.dd.childNodes[],X);if(_)Q.dd.style.left=Q.dd.style.top="-1970px";else{Q.show();C()}}}else if(Q.cal){Q.show();Q.cal.init();if(!Q.eCont)C()}function C(){var F=Q.position.left,B=Q.position.top,C=Q.el;if(C!=Q.srcEl&&(C.style.display=="none"||C.type=="hidden"))C=Q.srcEl;var H=V(C),$=G(W),D=N(U),A=Z(U),E=Q.dd.offsetHeight,_=Q.dd.offsetWidth;if(isNaN(B)){if(B=="above"||(B!="under"&&(($.topM+H.bottom+E>D.height)&&($.topM+H.top-E>))))B=A.top+$.topM+H.top-E-;else B=A.top+$.topM+H.bottom;B+=S?-:}else B+=A.top+$.topM;if(isNaN(F))F=A.left+Math.min($.leftM+H.left,D.width-_-)-(S?:);else F+=A.left+$.leftM;Q.dd.style.top=B+"px";Q.dd.style.left=F+"px"}}})($dp)
js日期文件
这是后台代码
protected void Page_Load(object sender, EventArgs e)
{
classDBOP db = new classDBOP(); if (!IsPostBack)
{
string strsj = Decode("str").ToString(); //Decode获取ajax里面的参数
string enddate = Decode("end").ToString();
if (strsj != null && enddate != null)
{
switch (Decode("method"))
{
case "dan": //method 方法
DataTable dt = db.ExcSql(Ding(strsj, enddate)); //ExcSql是封装好的方法，sql语句的执行，可以自己些数据库连接语句和执行方法
JObject jo =Count(dt);
Context.Response.ClearContent();
Context.Response.Write(jo.ToString());
Context.Response.End();
break;
//case "bingdan":
// dt = db.ExcSql(get.Ding(strsj, enddate));
// JArray ja = get.Dindan(dt);
// Context.Response.ClearContent();
// Context.Response.Write(ja.ToString());
// Context.Response.End();
// break;
}
}
}
}
/// <summary>
/// 柱状审核统计
/// </summary>
/// <param name="year"></param>
/// <param name="counts"></param>
/// <returns></returns>
public string Ding(string strsj, string endsj)
{
string sund = @"select OPState as 类别,count(OPState) as 数量统计, sum(PayMoney) as 金额之和
from UUSpotOrder where TicketsType='disney' and OrderDate between '" + strsj + "' and '" + endsj + "'group by OPState order by count(OPState) asc";
return sund;
}
/// <summary>
///订单统计(柱状)
/// </summary>
/// <param name="ds"></param>
/// <returns></returns>
public JObject Count(DataTable ds)
{
JObject obe = new JObject();
JArray men = new JArray();
JArray jo = new JArray();
JArray ja = new JArray();
if (ds != null && ds.Rows.Count > )
{
for (int i = ; i < ds.Rows.Count; i++)
{
string lei = Convert.ToString(ds.Rows[i]["类别"]);
int one = Convert.ToInt32(ds.Rows[i]["数量统计"]);
int meny = Convert.ToInt32(ds.Rows[i]["金额之和"]);
ja.Add(lei);
jo.Add(one);
men.Add(meny);
}
obe.Add("lei", ja);
obe.Add("countd", jo);
obe.Add("menoy", men);
}
return obe;
}
这是js代码
//线型人数统计显示
/*
同一种类型数据
1.参数 id:标签的id；texts：标题名称；jmonth：所传的横坐标参数；names：自定义名称；
json：参数；yuan：数据的单位
2.例子 ShowCount("xianMoney", "2015出游金额统计", r.jmonth, "金额", r.monthCount, "元");
3.参数格式（这里只是一般的数据，格式一样的）
{"jmonth": ["2月""3月", "4月""5月","6月"],
"monthCount": [0,0,2,0, 0,0 ]} */
function ShowCount(id,texts,jmonth,names,json,yuan) {
$("#"+id).highcharts({
title: {
text: texts,
x: - //center
},
subtitle: {
text: '',
x: -
},
xAxis: {
categories: jmonth
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: ,
width: ,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}('+ yuan +')</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth:
},
series: [{
name: names,
data: json
}]
});
}
//饼型统计
/*
同一种类型数据
1.参数 id:标签的id；text：标题名称；name：自定义名称；
json：参数；
2.例子Bing("bingMoney", "2015出游金额百分比", "金额", r);
3.参数格式（这里只是一般的数据，格式一样的）
{[["1",0],["2",0],["3",35],["4",0],["5",0 ],["6",0]]} */
function Bing( id, text,name,json) {
$('#' + id).highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: ,
beta:
}
},
title: {
text: text
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: ,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: name,
data: json
}]
});
}
//柱状统计图(多个不同数据类型)
/*
两种类型数据，也可以多种，在多种的情况下，在添加（name: namet ,data: jsons）
1.参数 id:标签的id；texts：标题名称；year：所传的横坐标参数；names：第一组自定义名称；
json：第一组参数；namet：第二组自定义名字；jsons：第二组参数
2.例子ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy);
3.参数格式
{"lei": [
"审闭 ",
"取消 ",
"待审 "
],
"countd": [
5,
6,
11
],
"menoy": [
200,
0,
0
]
}
*/
function ZhuZhuan(id, texts, year,names, json, namet,jsons) {
$('#'+id).highcharts({
chart: {
type: 'column'
},
title: {
text: texts
},
subtitle: {
text: ''
},
xAxis: {
categories:year
},
yAxis: {
min:
}, tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth:
}
},
series: [{
name: names+'(单)', /*单位可以随意改动*/
data: json
}, {
name: namet + '(元)',
data: jsons
}]
});
}
以下是图片展示
2.线性统计和饼形（同种类型）
这是html代码和js引用文件
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"> </script>
<script src="js/tuxing.js" type="text/javascript"></script>
<script type="text/jscript">
function abc() {
AjaxCount();
BingMoney(); }
function AjaxCount() {
//获取人数
$.ajax({
type: "POST",
url: "MonthSelect.aspx",
data: {
method: "monthCount",
date: $("#date").val(), //获取html标签的值
selexioa: $("#selexiaos").val(),
selextfs: $("#selefs").val()
},
datatype: 'json',
success: function (r) {
alert(r);
if (r.length > ) {
var r = $.parseJSON(r);
ShowCount("xianCount", "2015出游人数统计", r.jmonth, " 销售方式", r.monthCount, "人"); //调用tuxing。js里面写好的方法
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) { },
complete: function (XMLHttpRequest, textStatus) { }
})
}
//饼型金额
function BingMoney() {
var date = $("#date").val();
//获取后台金额方法
$.ajax({
type: "POST",
url: "MonthSelect.aspx",
data: {
method: "Bing",
date: $("#date").val(),
selexioa: $("#selexiaos").val(),
selextfs: $("#selefs").val()
},
datatype: 'json',
success: function (r) {
alert(r);
if (r.length > ) {
var r = $.parseJSON(r);
Bing("bingMoney", "2015出游金额百分比", "金额", r);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) { },
complete: function (XMLHttpRequest, textStatus) { }
})
} <script> <body style="overflow: scroll">
<input type="text" id="date" onfocus="WdatePicker({dateFmt: 'yyyy'})" value=""/>
<select name="selexiaos" id="selexiaos">
<option value="直销">直销</option>
<option value="补单">补单</option>
<option value="分销">分销</option>
</select>
<select name="selefs" id="selefs">
<option value="TU">TU</option>
<option value="OA">OA</option>
<option value="TM">TM</option>
</select>
<button id="select" onclick="abc();">
查询</button>
<div id="xianCount" class="yu">
</div>
<%-- <div id="xianMoney" class="yu">
</div>
<div id="zhuCount" class="yu">
</div>
<div id="zhuMoney" class="yu">
</div>--%>
<div id="bingMoney" class="yu">
</div>
</body>
js和html代码
后台代码
public partial class MonthSelect : CTUClassLibrary.Page
{ protected void Page_Load(object sender, EventArgs e)
{
classDBOP db = new classDBOP();
Lists get = new Lists();
string dates = Decode("date").ToString(); //获取ajax的参数值
string xiao = Decode("selexioa").ToString();
string fs = Decode("selextfs").ToString(); if (dates != null)
{
//sql条件语句
string countmoney = "sum(Amount)";
string counts = "count(Child)+count(Adult)";
string zx = " and Drp='" + fs + "' and ISFX='" + xiao + "'"; switch (Decode("method"))
{
case "monthCount": //线性统计图
DataTable dt = db.ExcSql(get.XianList(dates, counts, zx));//可以自己写sql语句和数据库连接方式
JObject jo = get.GetMonth(dt);
Str(jo);
break;
case "Bing": //饼形统计
dt = db.ExcSql(get.XianList(dates, countmoney, zx));
JArray jr = get.GetBing(dt);
Context.Response.ClearContent();
Context.Response.Write(jr.ToString());
Context.Response.End();
break;
}
}
}
public void Str(JObject jo)
{
Context.Response.ClearContent();
Context.Response.Write(jo.ToString());
Context.Response.End();
}
}
线性和饼形
public class Lists
{
/// <summary>
/// 线型统计获取金额
/// </summary>
/// <param name="year"></param>
/// <param name="counts"></param>
/// <returns></returns>
public string XianList(string year, string counts, string zhixiao)
{
string sund = counts + " from CTUOrder where year(starttime)=" + year;
//拼接查询语句（sql语句用 with as）
StringBuilder sb = new StringBuilder();
sb.Append("with ");
for (int i = 1; i < 13; i++)
{
sb.Append(" yue" + i + " as( select \"" + i + "\"=" + sund + " and month(getdate())=" + i + " " + zhixiao);
if (i == 12)
{
sb.Append(")");
}
else
{
sb.Append("),");
} }
sb.Append(" select * from ");
for (int j = 1; j < 13; j++)
{
if (j == 12)
{
sb.Append("yue" + j + "");
}
else
{
sb.Append("yue" + j + ",");
}
}
return sb.ToString(); ;
}
/// <summary>
/// 构建JSON字符串(线型统计图)
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public JObject GetMonth(DataTable ds)
{
JObject jo = new JObject();
JArray jmonth = new JArray();
JArray ja = new JArray();
int count;
for (int i = 1; i < 13; i++)
{
jmonth.Add(i + "月");
}
if (ds != null && ds.Rows.Count > 0)
{
for (int i = 0; i < 12; i++)
{
count = Convert.IsDBNull(ds.Rows[0][i]) ? 0 : Convert.ToInt32(ds.Rows[0][i]);
ja.Add(count);
}
}
else
{
ja.Add(0);
}
jo.Add("jmonth", jmonth);
jo.Add("monthCount", ja);
return jo;
}
/// <summary>
/// 构建JSON字符串(饼状统计图)
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public JArray GetBing(DataTable ds)
{
JArray jo = new JArray();
JArray ja = new JArray();
if (ds != null && ds.Rows.Count > 0)
{
for (int i = 1; i < 13; i++)
{
ja = new JArray();
int one = Convert.IsDBNull(ds.Rows[0][i - 1]) ? 0 : Convert.ToInt32(ds.Rows[0][i - 1]);
ja.Add("" + i + "");
ja.Add(one);
jo.Add(ja);
}
}
else
{
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
ja.Add(0);
}
return jo;
}
}
Getlist方法
线性统计图
饼形统计
js文件引用的http://www.hcharts.cn/demo/index.php?p=27里面的，
数据库连接语句好人查询语句，可以自己改动
利用ajax做的柱状图，线性统计图，饼状图的更多相关文章
- 利用Tkinter和matplotlib两种方式画饼状图
当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...
- 用FusionChartsFree做饼状图、柱状图、折线图的实例
1.先来看看要进行表现的页面:myChart.jsp <%@ page language="java" contentType="text/html; charse ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- C# 绘制图表（柱状图，线性图，饼状图）
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...
- Java创建柱状图及饼状图
Java创建图表其实还是很方便的,但是要引入相关的jar包.如下 jfreechart.jar jcommon,jar gnujaxp.jar 其中最主要的是jfreechart.jar. 下面就让我 ...
- 使用 jfreechart 生成 曲线、柱状图、饼状图、分布图 展示到JSP
虽然现在JS做报表和图形展示已经非常普遍和漂亮了,但是不能忽略有jfreechart 这样一种东西! 这些翻阅资料,在看以前写的示例时发现了关于jfreechart 的简单示例,不管怎样发上来分享一下 ...
- 基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制（上篇）
页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...
- Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- arcgis api for flex之专题图制作（饼状图，柱状图等）
最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...
随机推荐
- 进阶笔记(1)——JavaScript 语言精碎
调用:(调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数) 每个函数接受连个附加参数:this (取决于调用的模式).argument. js的四种调用模式及this指向: 1.方法调用:( ...
- Linux中Firefox——Firebug插件安装及使用
Firebug的安装方法即打开方式同httpfox Firebug使用指南: Firebug可以随时编辑页面:在HTML标签中,点击窗口上方的"inspect"命令,然后再选择页面 ...
- js序列化json对象
SerializeJsonToStr : function( oJson ) { if( oJson == null ) return "null"; if( typeof(oJs ...
- C++之------虚函数
今天又是周日,公司工业区这里九月份每个周日都会停电一天.停电停网,是没法活的.我们直接去老大家. 老大当爸爸了,回家一段时间了.听说孩子出生就不乖,很折腾他爸妈,这小家伙新生命二代.也愿小家伙早日康复 ...
- 禁用物料不允许BOM
应用 Oracle Bill Of Materiel 层 Level Function 函数名 Funcgtion Name BOM_BOMFDBOM 表单名 Form Name BOMFDBOM ...
- OC 代理 协议 委托 数据源的概念
(网摘) OBJC 中的 protocol 相当于 java 里的接口,delagate 就是接口的实现类(C中的回调类似 ): 数据源就是对象遵循了存储数据的协议,可以存储使用数据 协议表示了方法可 ...
- hash算法-time33算法
http://my.oschina.net/freegeek/blog/325531 http://www.cnblogs.com/napoleon_liu/articles/1911571.html ...
- C# partial修饰符_分部类_分部方法
今天翻了翻书,发现自己还是遗留下不少基础性的东西,老实说,不管一些基础的东西用到不用到都很应该了解,因为基础毕竟学习量不是很大. 一.分部类 什么是部分类呢?简单来说就是将一个类型或方法拆分到两个或多 ...
- JavaScript加密解密7种方法总结分析
原文地址:http://wenku.baidu.com/view/9048edee9e31433239689357.html 本文一共介绍了七种javascript加密方法: 在做网页时(其实是网页木 ...
- 关闭ubuntu apport
apport就是ubuntu上的"crash report"服务,就是当有程序崩溃时弹出的那个发送error report的程序: 个人觉得此功能无用,本着给我的老本子节省资源的思 ...