<!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. JQuery --- 第三期 (jQuery事件相关)

    个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. 如何用GoldWave批量删除mp3文件开头65秒?

    具体操作如下: 一.打开goldwave--文件--批处理 二.批处理设置:     添加需处理的文件或文件夹(右侧)         1.转换:设置转换格式.         2.处理:       ...

  3. eShopOnContainers 知多少[2]：Run起来

    环境准备 Win10(开启Hyper-V) .NET Core SDK Docker for Windows VS2017 or VS Code Git SQL Server Management S ...

  4. pandas 获取数据帧DataFrame的行、列数

    1.创建数据帧 import pandas as pd df = pd.DataFrame([[1, 'A', '3%' ], [2, 'B']], index=['row_0', 'row_1'], ...

  5. Go基础（1）

    demo1: package add var Name string = "hello world" var Age int = 10 package main import ( ...

  6. Struts第一个案例搭建

    1.引入依赖 <dependency> <groupId>javaee</groupId> <artifactId>javaee-api</art ...

  7. expect实现自动交互由浅入深

    expect实现自动交互由浅入深 作为运维人员可以通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如telnet ...

  8. SQL优化 MySQL版 - 索引分类、创建方式、删除索引、查看索引、SQL性能问题

    SQL优化 MySQL版  - 索引分类.创建方式.删除索引.查看索引.SQL性能问题 作者 Stanley 罗昊 [转载请注明出处和署名,谢谢!] 索引分类 单值索引 单的意思就是单列的值,比如说有 ...

  9. C#语法——泛型的多种应用

    本篇文章主要介绍泛型的应用. 泛型是.NET Framework 2.0 版类库就已经提供的语法,主要用于提高代码的可重用性.类型安全性和效率. 泛型的定义 下面定义了一个普通类和一个泛型类,我们可以 ...

  10. 浅谈基于Linux的Redis环境搭建

    本篇文章主要讲解基于Linux环境的Redis服务搭建,Redis服务配置.客户端访问和防火强配置等技术,适合具有一定Linux基础和Redis基础的读者阅读. 一  Redis服务搭建 1.在根路径 ...