<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <script src="../../js/my/highcharts.js"></script>

     <script src="../../css2/jquery-1.10.2.min.js"></script>

 </head>

 <body>

     <div class="piecleft" id="chart" style="height:350px; width: 350px;">

     </div>

     <script type="text/javascript" charset="utf-8">

         $.ajax({

             url: "/handler/hbtongji.ashx",

             type: "GET",

             data: {},

             success: function (data) {

                 var obj = eval('(' + data + ')');

                 transfer = parseInt(obj["state"][]["transfer"]);

                 transferNO = parseInt(obj["state"][]["transferNO"]);

                 var dataset = [transfer, transferNO];

                 var chart;

                 $(document).ready(function () {

                     chart = new Highcharts.Chart({

                         chart: {

                             renderTo: 'chart'

                         },

                         title: {

                             text: '划拨土地饼状图统计'

                         },

                         plotArea: {

                             shadow: null,

                             borderWidth: null,

                             backgroundColor: null

                         },

                         tooltip: {

                             formatter: function () {

                                 return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, ) + '% (' +

                                     Highcharts.numberFormat(this.y, , ',') + ' 个)';

                             }

                         },

                         plotOptions: {

                             pie: {

                                 allowPointSelect: true,

                                 cursor: 'pointer',

                                 dataLabels: {

                                     enabled: true,

                                     formatter: function () {

                                         if (this.percentage >) return this.point.name;

                                     },

                                     color: 'white',

                                     style: {

                                         font: '13px Trebuchet MS, Verdana, sans-serif'

                                     }

                                 }

                             }

                         },

                         legend: {

                             backgroundColor: '#FFFFFF',

                             x: ,

                             y: -

                         },

                         credits: {

                             enabled: false

                         },

                         series: [{

                             type: 'pie',

                             name: 'Browser share',

                             data: [

                                 ['未划拨地块', transfer],

                                 ['已划拨地块', transferNO]

                             ]

                         }]

                     });

                 });

             }

         })

     </script>

 </body>

 </html>

html页面

 <%@ WebHandler Language="C#" Class="hbtongji" %>

 using System;

 using System.Web;

 using System.Data;

 using System.Text;

 using  System.Runtime.Serialization.Json;

 using System.Web.Script.Serialization;

 using KangHui.BaseClass;

 using KangHui.Common;

 public class hbtongji : IHttpHandler {

     public void ProcessRequest (HttpContext context) {

         string con = ConfigHelper.GetConnectionString("DBConnection");

         //这是一个显示的数据（未出让地块的数量）

         string sql = "SELECT COUNT(*) as sum FROM Mhuabo WHERE stateID=4";

         //这是一个显示的数据（已出让地块的数量）

         string sql1 = "SELECT COUNT(*) as sum FROM Mhuabo WHERE stateID=5";

         DataSet ds = DbHelperSQL.Query(sql,con);

         DataSet ds1 = DbHelperSQL.Query(sql1,con);

         StringBuilder str = new StringBuilder();

         str.Append("{\"state\":[{\"transfer\":\"" + ds.Tables[].Rows[]["sum"] + "\"},{\"transferNO\":\"" + ds1.Tables[].Rows[]["sum"] + "\"}]");

         str.Append("}");

         context.Response.Write(str.ToString());

     }

     public bool IsReusable {

         get {

             return false;

         }

     }

 }

一般处理程序页面

公司项目要做统计，饼状图必不可少，闲手之余，写下这篇博客，希望能帮助新手的你。

-----------------------------------------未点饼状图之前

-----------------------------------------点击饼状图的时候

js饼状图（带百分比）功能实现，新人必懂的更多相关文章

  1. D3.js 饼状图的制作

    1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终 ...

  2. 转：C# 中 MSCHART 饼状图显示百分比

    转自:http://blog.sina.com.cn/s/blog_51beaf0e0100yffo.html 1)显示百分比 Chart1.Series["Series1"].L ...

  3. Matplotlib基本图形之饼状图

    Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time imp ...

  4. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. ComponentOne的C1Chart做饼状图怎么显示其百分比

    问题:ComponentOne的C1Chart做饼状图怎么显示每部分的百分比 描述: 我用C1Chart做饼状图的时候,不知道怎么显示其百分比在对应的区域上,求解. 目前做的效果(附加代码所生成的饼状 ...

  6. 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

    本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...

  7. Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  8. highcharts-3d.js实现饼状图

    嘛,首先,废话一下,这个插件挺好用的.我是因为做亮灯率demo所以接触了它. 首先引用外部文件,jQuery.js,highcharts.js,highcharts-3d.js,好的,这就搞定了第一步 ...

  9. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

随机推荐

  1. ORA-39127: 调用 "WMSYS"."LT_EXPORT_PKG"."SCHEMA_INFO_EXP" 时发生意外错误

    expdp 告警提示: Export: Release 11.2.0.4.0 - Production on 星期日 4月 28 12:14:51 2019....ORA-39127: 调用 &quo ...

  2. 如何利用MongoDB实现高性能，高可用的双活应用架构？

    投资界有一句至理名言——“不要把鸡蛋放在同一个篮子里”.说的是投资需要分解风险,以免孤注一掷失败之后造成巨大的损失. 转发来自 如何利用MongoDB实现高性能,高可用的双活应用架构?http://d ...

  3. Scanner类详解

    Scanner类用于获取键盘输入(是一个基于正则表达式的文本扫描器),它可以从文件.字符串.输入流中解析出基本类型值和字符串值.Scanner类提供了多个构造器,不同的构造器可以接收文件.字符串和输入 ...

  4. Spring Boot 2.2 增加了一个新功能，启动飞起~

    前几天栈长分享了一个好玩的框架:一个比Spring Boot快44倍的Java框架!,是不是感觉 Spring Boot 略慢?今天讲一下 Spring Boot 添加的这个新特性,可以大大提升 Sp ...

  5. 为什么不要使用 async void？

    问题 在使用 Abp 框架的后台作业时,当后台作业抛出异常,会导致整个程序崩溃.在 Abp 框架的底层执行后台作业的时候,有 try/catch 语句块用来捕获后台任务执行时的异常,但是在这里没有生效 ...

  6. Maven常用命令：

    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ 一,Maven常用命令: 1. 创建Maven的 ...

  7. Python3中性能测试工具Locust安装使用

    Locust安装使用: 安装: python3中           ---> pip3 install locust 验证是否安装成功---> 终端中输入 locust --help  ...

  8. springboot~ EventListener事件监听的使用

    EventListener事件触发和监听器可以对代码解耦,在一些与业务无关的,通用的操作方法,我们可以把它设计成事件监听器,像通知,消息这些模块都可以这样设计. 事件源 @Getter @Builde ...

  9. Session的使用与Session共享问题

    Session的使用与Session共享问题 Session方法 getId():获取sessionId,这个id不一定是数字,比方说它用字符串来表示唯一标识,所以它返回值是String; boole ...

  10. 【Javascript】JS的异步操作，浏览器的多线程间的协作

    遇到的问题,引发了思考 今天看了一个例子,强烈引发了我对于浏览器多线程之间的操作机制.同步与异步.回调函数的兴致,代码如下: <html> <head> <title&g ...