<!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. 深入浅出—Redis集群的相关详解

    前言: 这篇文章主要介绍了Redis集群的相关,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值. 注意!要求使用的都是redis3.0以上的版本,因为3.0以上增加了red ...

  2. Spring boot打包war包

    1.设置打包的类型(war/jar) 在pom.xml里设置 <packaging>war</packaging> 2.移除嵌入式tomcat插件 //在pom.xml里找到s ...

  3. Android Studio 受不了了

    今天遇到一个问题,受不了了,来吐槽一下: Android Studio 里面创建两个工程:app, baselib.一个是App 一个是库.编译不过去. targetSdkVersion 26 imp ...

  4. 基于weex的app开发脚手架weexplus学习笔记

    认识weexplus weexplus是基于weex官方的二次开发版本,weex和react native一样同属第2代跨平台技术,解决了第一代性能低下,体验不好的问题,同时保留了第一代 多平台一套代 ...

  5. Swagger使用指南

    1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  6. Servlet+JSP及Tomcat常见面试题（面试必备）

    1.  什么是servlet? servlet是用来处理客户端请求并产生动态网页内容的java类 2.  Tomcat的缺省端口是多少,怎么修改? a)      默认端口号是8080 b)      ...

  7. 跟我一起学opencv 第三课之图像在opencv中的表示-Mat对象

    1.下面第一章图是一位美女图像,和其他数据一样图像在计算机中也是以二进制存储,下面第二张图 2.在摄像头眼里一幅图像就是一个矩阵或者说是二维数组,数组元素是像素值 3.opencv中以Mat对象表示图 ...

  8. Litepal【开源数据库ORM框架】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 好用的数据库框架. 效果图 代码分析 本篇主要是整理Litepal的引入和增删改查的简单操作,具体使用请阅读参考资料. 使用步骤 一 ...

  9. 知识小罐头05（tomcat8请求源码分析 上）

    这一篇我们不看源码,就大概理一下Tomcat内部组成部分!前面花费了两篇博客的篇幅来说说了一般的maven web项目并部署到tomcat运行,其实都是为这篇做铺垫的! 其实我下载了tomcat7,t ...

  10. 微软开发者大会：VS 2019 Preview 发布；Windows UX 主要技术开源

    美国当地时间12月4日,微软正式举行 Microsoft Connect(); 2018 开发者大会,本次大会的 slogan 是"Build the apps of tomorrow, t ...