js餅狀圖（帶百分比）功能實現，新人必懂
阿新 • • 發佈：2018-06-15
tool edi state pro form allow UNC connect ajax
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="../../js/my/highcharts.js"></script> 7 <script src="../../css2/jquery-1.10.2.min.js"></script> 8 </head> 9 <body> 10 <div classhtml頁面="piecleft" id="chart" style="height:350px; width: 350px;"> 11 </div> 12 <script type="text/javascript" charset="utf-8"> 13 $.ajax({ 14 url: "/handler/hbtongji.ashx", 15 type: "GET", 16 data: {}, 17 success: function (data) { 1819 var obj = eval(‘(‘ + data + ‘)‘); 20 transfer = parseInt(obj["state"][0]["transfer"]); 21 transferNO = parseInt(obj["state"][1]["transferNO"]); 22 var dataset = [transfer, transferNO]; 23 var chart; 24 $(document).ready(function () {25 chart = new Highcharts.Chart({ 26 chart: { 27 renderTo: ‘chart‘ 28 }, 29 title: { 30 text: ‘劃撥土地餅狀圖統計‘ 31 }, 32 plotArea: { 33 shadow: null, 34 borderWidth: null, 35 backgroundColor: null 36 }, 37 tooltip: { 38 formatter: function () { 39 return ‘<b>‘ + this.point.name + ‘</b>: ‘ + Highcharts.numberFormat(this.percentage, 1) + ‘% (‘ + 40 Highcharts.numberFormat(this.y, 0, ‘,‘) + ‘ 個)‘; 41 } 42 }, 43 plotOptions: { 44 pie: { 45 allowPointSelect: true, 46 cursor: ‘pointer‘, 47 dataLabels: { 48 enabled: true, 49 formatter: function () { 50 if (this.percentage >4) return this.point.name; 51 }, 52 color: ‘white‘, 53 style: { 54 font: ‘13px Trebuchet MS, Verdana, sans-serif‘ 55 } 56 } 57 } 58 }, 59 legend: { 60 backgroundColor: ‘#FFFFFF‘, 61 x: 0, 62 y: -30 63 }, 64 credits: { 65 enabled: false 66 }, 67 series: [{ 68 type: ‘pie‘, 69 name: ‘Browser share‘, 70 data: [ 71 [‘未劃撥地塊‘, transfer], 72 [‘已劃撥地塊‘, transferNO] 73 ] 74 }] 75 }); 76 }); 77 } 78 }) 79 80 </script> 81 </body> 82 </html>
1 <%@ WebHandler Language="C#" Class="hbtongji" %> 2 3 using System; 4 using System.Web; 5 using System.Data; 6 using System.Text; 7 using System.Runtime.Serialization.Json; 8 using System.Web.Script.Serialization; 9 using KangHui.BaseClass; 10 using KangHui.Common; 11 12 13 public class hbtongji : IHttpHandler { 14 15 public void ProcessRequest (HttpContext context) { 16 string con = ConfigHelper.GetConnectionString("DBConnection"); 17 //這是一個顯示的數據（未出讓地塊的數量） 18 string sql = "SELECT COUNT(*) as sum FROM Mhuabo WHERE stateID=4"; 19 //這是一個顯示的數據（已出讓地塊的數量） 20 string sql1 = "SELECT COUNT(*) as sum FROM Mhuabo WHERE stateID=5"; 21 DataSet ds = DbHelperSQL.Query(sql,con); 22 DataSet ds1 = DbHelperSQL.Query(sql1,con); 23 24 StringBuilder str = new StringBuilder(); 25 str.Append("{\"state\":[{\"transfer\":\"" + ds.Tables[0].Rows[0]["sum"] + "\"},{\"transferNO\":\"" + ds1.Tables[0].Rows[0]["sum"] + "\"}]"); 26 str.Append("}"); 27 context.Response.Write(str.ToString()); 28 } 29 30 31 public bool IsReusable { 32 get { 33 return false; 34 } 35 } 36 37 }一般處理程序頁面
公司項目要做統計，餅狀圖必不可少，閑手之余，寫下這篇博客，希望能幫助新手的你。
-----------------------------------------未點餅狀圖之前
-----------------------------------------點擊餅狀圖的時候
js餅狀圖（帶百分比）功能實現，新人必懂