今天给大家带来一款基于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饼状图比例分布数据报表的更多相关文章

  1. swift app中展示折线图, 饼状图, 柱状图等数据图表

    github 下载Charts-master SDK,该SDK有多种可自定义的图表样式 lineChart 正弦余弦线图 LineChart (cubic lines) LineChart (grad ...

  2. DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  3. 一款基于jQuery的图片左右滑动焦点图

    今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...

  4. Matplotlib基本图形之饼状图

    Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time imp ...

  5. 简单excel饼状图怎么做,bi工具怎么做饼状图

    饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...

  6. Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...

  7. D3.js的v5版本入门教程(第十三章)—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  8. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  9. 基于matplotlib的数据可视化 - 饼状图pie

    绘制饼状图的基本语法 创建数组 x 的饼图,每个楔形的面积由 x / sum(x) 决定: 若 sum(x) < 1,则 x 数组不会被标准化,x 值即为楔形区域面积占比.注意,该种情况会出现 ...

随机推荐

  1. html5 canvas图片反色

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Java并发编程:Java ConcurrentModificationException异常原因和解决方法

    Java ConcurrentModificationException异常原因和解决方法 在前面一篇文章中提到,对Vector.ArrayList在迭代的时候如果同时对其进行修改就会抛出java.u ...

  3. HDU 2147 kiki's game (简单博弈,找规律)

    kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/1000 K (Java/Others)Total ...

  4. 题目连接:http://acm.zznu.edu.cn/problem.php?id=1329

    题目大意: 定理:把一个至少两位的正整数的个位数字去掉,再从余下的数中减去个位数的5倍.当且仅当差是17的倍数时,原数也是17的倍数 . 例如,34是17的倍数,因为3-20=-17是17的倍数:20 ...

  5. svn如何回滚到之前版本

    第一种情况:改动没有被提交(commit). 这种情况下,使用svn revert就能取消之前的修改. svn revert用法如下: # svn revert [-R] something 其中so ...

  6. android获取手机的所有通讯录的号码和sim卡号码

    ============personer================================================ package com.qgc.cantent.entity; ...

  7. json操作json类型转换

    前提是需要加Jar包: gson-2.2.2.jar package utils; import java.io.BufferedReader;import java.io.FileInputStre ...

  8. [Sparrow OS 设计文档连载(一)] Introduction

  9. OC:内存管理、dealloc方法、copy知识点

    属性的声明:使⽤@property声明属性
 例如:@property NSString *name: 相当于@interface中声明了两个⽅法(setter.getter): 属性的实现:使⽤@s ...

  10. jquery 应用小结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...