js餅狀圖（帶百分比）功能實現，新人必懂

本文轉載自查看原文 2018-06-15 10:21 2045

 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 class="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) {
18 
19                 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>

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 }

一般處理程序頁面

公司項目要做統計，餅狀圖必不可少，閑手之余，寫下這篇博客，希望能幫助新手的你。

-----------------------------------------未點餅狀圖之前

-----------------------------------------點擊餅狀圖的時候

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 純CSS實現餅圖、環形圖（百分比） Tableau餅圖中，顯示百分比功能 js 實現加載百分比效果 echars 環形圖百分比 js計算百分比 js Number 轉為百分比 Echarts柱狀圖百分比顯示用Canvas+js 實現簡單圓形百分比統計圖表 JS教程之實現加載圖片時百分比進度 js求兩個整數的百分比