HighChar 案例
Highchars
//前台
<script> $(function () { //showChat(); initChat(); showPie(); initPie(); }) function initChat() { var xlst = []; var ylst = []; $.ajax({ url: "Handler1.ashx", data: {}, dataType: "json", success: function (data) { data = eval("(" + data + ")"); //序列化数据 //console.log(data); $.each(data.Table, function (i, j) { xlst.push(parseInt(j.day)); //push 添加数据 ylst.push(parseFloat(j.sum)); }) showChat(xlst, ylst); //console.log(xlst); //console.log(ylst); } }) } //第一步 加载静态样式 function showChat(xlst, ylst) { var chart = Highcharts.chart('container', { chart: { type: 'spline' //折线图 //type: 'column' //柱状图 }, title: { text: '网站每日销售统计图' }, subtitle: { text: '数据来源: 后台统计' }, xAxis: { categories: xlst, crosshair: true }, yAxis: { min: 0, title: { text: '销售额 (元)' } }, tooltip: { // head + 每个 point + footer 拼接成完整的 table 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:.1f} ¥</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { borderWidth: 0 } }, series: [{ name: '销售统计', data: ylst }, ] }); } //饼状图 function initPie() { var pieArr = []; $.ajax({ url: "Handler1.ashx", data: { op: "pie" }, dataType: "json", success: function (data) { data = eval("(" + data + ")"); //序列化数据 console.log(data); $.each(data.Table, function (i,j) {//循环 var value = { name: j['OrdertType'], y: parseFloat(j['totalMoney']) }; pieArr.push(value); }) //调用饼状图方法 showPie(pieArr); } }) } //加载饼图样式 function showPie(pieArr) { console.log(pieArr); Highcharts.chart('pie', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: '所有订单销售占比' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: '商品类型', colorByPoint: true, data: pieArr }] }); } </script> //后台 public string SqlConnectionString = ConfigurationManager.ConnectionStrings["sqlString"].ConnectionString; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; var op = context.Request.QueryString["op"]; if (op == "pie") { context.Response.Write(new JavaScriptSerializer().Serialize(LoadPieData())); } else { context.Response.Write(new JavaScriptSerializer().Serialize(LoadOrderData())); } } public bool IsReusable { get { return false; } } /// <summary> /// 加载曲线图 /// </summary> /// <returns></returns> public string LoadOrderData() { string sql = @"select convert(int,DAY(CreateTime),120) as 'day',sum(OrderAmount) as 'sum' from OrderInfo group by convert(int,DAY(CreateTime),120) order by convert(int,DAY(CreateTime),120) asc"; DataSet ds = SqlHelper.ExecuteDataset(SqlConnectionString, CommandType.Text, sql); //调用方法将dataset转换为json格式的数据 var result = GetJsonByDataset(ds); return result; } /// <summary> /// 统计每个订单类型的销售额 /// </summary> /// <returns></returns> public string LoadPieData() { string sql = @"select SUM(OrderAmount) as totalMoney,OrdertType=Case OrdertType when 1 then '家电' when 2 then '生活用品' else '其他' end from OrderInfo group by(OrdertType) "; DataSet ds = SqlHelper.ExecuteDataset(SqlConnectionString, CommandType.Text, sql); //调用方法将dataset转换为json格式的数据 var result = GetJsonByDataset(ds); return result; } //StringBuilder 如果是长字符串拼接就用stringbuilder(比如sql拼接,html拼接) //string 如果是短字符串拼接就用string /// 把dataset数据转换成json的格式 /// </summary> /// <param name="ds">dataset数据集</param> /// <returns>json格式的字符串</returns> public static string GetJsonByDataset(DataSet ds) { if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0) { //如果查询到的数据为空则返回标记ok:false return "{\"ok\":false}"; } StringBuilder sb = new StringBuilder(); sb.Append("{\"ok\":true,"); foreach (DataTable dt in ds.Tables) { sb.Append(string.Format("\"{0}\":[", dt.TableName)); foreach (DataRow dr in dt.Rows) { sb.Append("{"); for (int i = 0; i < dr.Table.Columns.Count; i++) { sb.AppendFormat("\"{0}\":\"{1}\",", dr.Table.Columns[i].ColumnName.Replace("\"", "\\\"").Replace("\'", "\\\'"), ObjToStr(dr[i]).Replace("\"", "\\\"").Replace("\'", "\\\'")).Replace(Convert.ToString((char)13), "\\r\\n").Replace(Convert.ToString((char)10), "\\r\\n"); } sb.Remove(sb.ToString().LastIndexOf(','), 1); sb.Append("},"); } sb.Remove(sb.ToString().LastIndexOf(','), 1); sb.Append("],"); } sb.Remove(sb.ToString().LastIndexOf(','), 1); sb.Append("}"); return sb.ToString(); } /// <summary> /// 将object转换成为string /// </summary> /// <param name="ob">obj对象</param> /// <returns></returns> public static string ObjToStr(object ob) { if (ob == null) { return string.Empty; } else return ob.ToString(); }