一款基于jQuery饼状图比例分布数据报表
今天给大家带来一款基于jQuery饼状图比例分布数据报表。这款报表插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
实现的代码。
html代码:
<div style="width: 600px; margin: 0 auto;">
<table id='myTable5'>
<caption>
会员地区分布</caption>
<thead>
<tr>
<th>
</th>
<th>
河北
</th>
<th>
河南
</th>
<th>
湖北
</th>
<th>
湖南
</th>
<th>
山东
</th>
<th>
山西
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
1200
</th>
<td>
540
</td>
<td>
300
</td>
<td>
150
</td>
<td>
180
</td>
<td>
120
</td>
<td>
180
</td>
</tr>
</tbody>
</table>
<table id='myTable1'>
<caption>
会员性别分布</caption>
<thead>
<tr>
<th>
</th>
<th>
男
</th>
<th>
女
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
1000
</th>
<td>
450
</td>
<td>
550
</td>
</tr>
</tbody>
</table>
</div>
js代码:
<script type="text/javascript">
gvChartInit();
$(document).ready(function () {
$('#myTable5').gvChart({
chartType: 'PieChart',
gvSettings: {
vAxis: { title: 'No of players' },
hAxis: { title: 'Month' },
width: 600,
height: 350
}
});
});
</script>
<script type="text/javascript">
gvChartInit();
$(document).ready(function () {
$('#myTable1').gvChart({
chartType: 'PieChart',
gvSettings: {
vAxis: { title: 'No of players' },
hAxis: { title: 'Month' },
width: 600,
height: 350
}
});
});
</script>
via:http://www.w2bc.com/Article/18257
一款基于jQuery饼状图比例分布数据报表的更多相关文章
- swift app中展示折线图, 饼状图, 柱状图等数据图表
github 下载Charts-master SDK,该SDK有多种可自定义的图表样式 lineChart 正弦余弦线图 LineChart (cubic lines) LineChart (grad ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- 一款基于jQuery的图片左右滑动焦点图
今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...
- Matplotlib基本图形之饼状图
Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time imp ...
- 简单excel饼状图怎么做,bi工具怎么做饼状图
饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...
- Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- D3.js的v5版本入门教程(第十三章)—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...
- 基于matplotlib的数据可视化 - 饼状图pie
绘制饼状图的基本语法 创建数组 x 的饼图,每个楔形的面积由 x / sum(x) 决定: 若 sum(x) < 1,则 x 数组不会被标准化,x 值即为楔形区域面积占比.注意,该种情况会出现 ...
随机推荐
- ZeroCopyLiteralByteString cannot access superclass
问题描述 在HBase上运行MapReduce作业时,报如下异常:IllegalAccessError: class com.google.protobuf.HBaseZeroCopyByteStri ...
- FTP没权限直接删除目录,写的一个小工具循环删除
$path = '/var/www/html/Runtime/'; $ite = new RecursiveDirectoryIterator($path); foreach (new Recursi ...
- PHP代码格式化批量脚本
@echo off echo please input phpCB url: set /p input= cd /d "E:\tools\phpCB\" phpCB --space ...
- STM32先设置寄存器还是先使能时钟
http://zhidao.baidu.com/link?url=gdVNuIgLOJcV37QzbCx0IrFip5pskiPQDWpoZayr_xBEe120p4d_iWtrfDl1d4tSFaH ...
- win7 文件共享 xp
前几天因为需要将win7内一文件夹共享给XP使用,因为NT5跟NT6安全机制的问题,共享的实现没有XP共享的方便,很多人是牺牲(关闭)了win7的系统防火墙才达到共享给XP的目的,但是关闭防火墙势必会 ...
- 利用UIImagePickerController或者利用UIKit的 UIGraphicsBeginImageContext保存图片
转载自:http://my.oschina.net/hmj/blog/99970 应用中有时我们会有保存图片的需求,如利用UIImagePickerController用IOS设备内置的相机拍照 ...
- 简易的JQuery设置Cookie
使用之前先引用这两个文件: 然后基本的功能代码如下: <div> <input id="txtDelValues" type="text" / ...
- win2008 64位 + oracle11G 64位 IIS7.5 配置WEBSERVICE
第一个错误: 安装过程依旧是那样简单,但在配好IIS站点,准备连接数据库的时候出错了,以下是错误提示:System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更 ...
- Delphi中GUID相等检查中经典指针应用
type PGUID = ^TGUID; TGUID = packed record D1: LongWord; D2: Word; D3: Word; D4: array[0..7] of Byte ...
- 利用 Heritrix 构建特定站点爬虫
http://www.ibm.com/developerworks/cn/opensource/os-cn-heritrix/