js饼状图（带百分比）功能实现，新人必懂
<!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饼状图（带百分比）功能实现，新人必懂的更多相关文章
- D3.js 饼状图的制作
1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终 ...
- 转：C# 中 MSCHART 饼状图显示百分比
转自:http://blog.sina.com.cn/s/blog_51beaf0e0100yffo.html 1)显示百分比 Chart1.Series["Series1"].L ...
- Matplotlib基本图形之饼状图
Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time imp ...
- canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- ComponentOne的C1Chart做饼状图怎么显示其百分比
问题:ComponentOne的C1Chart做饼状图怎么显示每部分的百分比 描述: 我用C1Chart做饼状图的时候,不知道怎么显示其百分比在对应的区域上,求解. 目前做的效果(附加代码所生成的饼状 ...
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...
- Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- highcharts-3d.js实现饼状图
嘛,首先,废话一下,这个插件挺好用的.我是因为做亮灯率demo所以接触了它. 首先引用外部文件,jQuery.js,highcharts.js,highcharts-3d.js,好的,这就搞定了第一步 ...
- D3.js系列——布局：饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
随机推荐
- php 通过header下载中文文件名 压缩包损坏或文件不存在的问题
开发中大家都是使用的utf8编码,昨天遇到一个奇坑,本是一件很小的问题,解决也浪费了个吧小时.废话不多说,植入正题: 文件下载方式:通过header二进制流文件下载需求: 文件上传保留文件名不变数据字 ...
- mssql sqlserver 不固定行转列数据(动态列)
转自:http://www.maomao365.com/?p=5471 摘要: 下文主要讲述动态行列转换语句,列名会根据行数据的不同, 动态的发生变化 ------------------------ ...
- 处理安卓和ios当页面原生键盘弹出，输入框不显示
$('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function() ...
- 跟我一起学opencv 第五课之调整图像亮度和对比度
一.调整图像亮度与对比度 1.图像变换 ---像素变换-点操作 ---邻域操作-区域操作 调整图像亮度和对比度属于像素变换-点操作 公式为:g(i,j) = αf(i,j) + β 其中α>0 ...
- [Abp vNext 源码分析] - 文章目录
一.简要介绍 ABP vNext 是 ABP 框架作者所发起的新项目,截止目前 (2019 年 2 月 18 日) 已经拥有 1400 多个 Star,最新版本号为 v 0.16.0 ,但还属于预览版 ...
- 补习系列(15)-springboot 分布式会话原理
目录 一.背景 二.SpringBoot 分布式会话 三.样例程序 四.原理进阶 A. 序列化 B. 会话代理 C. 数据老化 小结 一.背景 在 补习系列(3)-springboot 几种scope ...
- 使用Atlas进行元数据管理之容错和高可用
1. 介绍 Apache Atlas使用各种系统并与之交互,为数据管理员提供元数据管理和数据血缘信息.通过适当地选择和配置这些依赖关系,可以使用Atlas实现高度的服务可用性.本文档介绍了Atlas中 ...
- int16, int32, int64等类型说明
Int16 相当于 short 占2个字节 -32768 ~ 32767 Int32 相当于 int 占4个字节 -2147483648 ~ 2147483647 Int64 ...
- mysql触发器new和old
下面为您介绍mysql触发器new old的相关知识,供您参考学习,如果您在mysql触发器方面遇到过类似的问题,不妨一看,相信对您会有所帮助. mysql触发器new old: "NEW ...
- 【转】Redis一般会遇到的问题以及解析
单线程的 Redis 为什么这么快 这个问题是对 Redis 内部机制的一个考察.根据我的面试经验,很多人都不知道Redis 是单线程工作模型.所以,这个问题还是应该要复习一下的. 回答主要是以下三点 ...