<!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. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  2. Vue.js 学习笔记 第4章 v-bind 及 class与style绑定

    本篇目录: 4.1 了解v-bind指令 4.2 绑定class的几种方式 4.3 绑定内联样式 DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定cl ...

  3. 数据库之redis篇（3）—— Python操作redis

    虽然前面两篇已经说了redis的一些配置安装什么的,篇幅有点长,可能看完了也不知道怎么操作,这里再浓缩一下: 什么是redis redis完全开源免费的,遵守BSD协议,是一个高性能的非关系型key- ...

  4. Python初识+条件语句+循环语句

    一.写照: 1.第一个程序 hello world print('hello world') 后缀名可以是任意(只是现在)(lx.py lx.ps) 导入模块时不是.py 就会出错 2.解释器路径 # ...

  5. Linux文件系统类型和区别

    文件系统EXT3,EXT4和XFS的区别: 1. EXT3 (1)最多只能支持32TB的文件系统和2TB的文件,实际只能容纳2TB的文件系统和16GB的文件 (2)Ext3目前只支持32000个子目录 ...

  6. 【Android Studio安装部署系列】八、Android Studio主题皮肤更换

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio具有自己的主题皮肤,但是如果想要更换自己喜欢的主题皮肤,可以参考下面的步骤. 注意,更换主题皮肤,之前的 ...

  7. LogcatHelperDemo【应用log信息保存成本地文件】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下LogcatHelper的使用,并对原有代码进行了修改[因为保存到应用内的目录中不需要申请权限,所以去掉保存到SD的功能- ...

  8. Java集合详解1：ArrayList,Vector与Stack

    今天我们来探索一下LinkedList和Queue,以及Stack的源码. 具体代码在我的GitHub中可以找到 https://github.com/h2pl/MyTech 喜欢的话麻烦star一下 ...

  9. 从PRISM开始学WPF（二）Prism-更新至Prism7.1

    0x1 PRISM? PRISM项目地址:https://github.com/PrismLibrary/Prism 先看下简介: Prism is a framework for building ...

  10. 【带着canvas去流浪】（1）绘制柱状图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...