Merge pull request TBEDP#135 from fengmk2/gender

add gender chart and demo
oerk · Aug 27, 2013 · f38d383 · f38d383
2 parents a5ffa3d + 8187556
commit f38d383
Show file tree

Hide file tree

Showing 4 changed files with 390 additions and 22 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -4,6 +4,8 @@
     "console",
     "document",
     "clearInterval",
+    "Raphael",
+    "$",
     "setInterval"
   ],
   "es5": false,

diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 DataV.js
 ============
-DataV.js是一个JavaScript的数据可视化库，致力于推动数据可视化在普通业务的落地应用。我们的目标是：
+DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可视化在普通业务的落地应用。
+我们的目标是：
 > 凡有数据在处，皆能可视化
 
 ![DataV logo](https://raw.github.com/TBEDP/datavjs/master/doc/assets/logo.png)
@@ -11,13 +12,14 @@ DataV.js是一个JavaScript的数据可视化库，致力于推动数据可视
 ## 安装
 目前处于开发中，并未release正式版本，如需使用，请采用如下方式：
 
+```bash
+$ git clone git://github.com/TBEDP/datavjs.git
 ```
-// Clone到本地
-git clone git://github.com/TBEDP/datavjs.git
-```
-需要注意的是`example`目录下的例子中有ajax存在，所以你需要一个服务器来托管这些静态文件。
 
-你也可以试用基于DataV.js开发的[Chrome插件](https://chrome.google.com/webstore/detail/datavjs/fkekhkndcgobgjbkclehjognobgdoppm)，可以在任意网页中将表格可视化。
+需要注意的是 [example](https://github.com/TBEDP/datavjs/tree/master/example) 目录下的例子中有 `ajax` 存在，所以你需要一个服务器来托管这些静态文件。
+
+你也可以试用基于 DataV.js 开发的 [Chrome插件](https://chrome.google.com/webstore/detail/datavjs/fkekhkndcgobgjbkclehjognobgdoppm)，可以在任意网页中将表格可视化。
+
 ## Examples
 - [Pie](http://datavlab.org/datavjs/#pie)
 ![Pie图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/pie.jpg)
@@ -37,18 +39,22 @@ git clone git://github.com/TBEDP/datavjs.git
 ![Bubble图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/bubble.jpg)
 - [Chord](http://datavlab.org/datavjs/#chord)
 ![Chord图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/chord.jpg)
+- [Gender 性别图](https://github.com/TBEDP/datavjs/tree/master/example/gender)
+![Gender](http://nfs.nodeblog.org/d/3/d317bbffe6cc085b63c653e02d4d5373.png)
 
 ## Quick start
 此处以Pie图为例。
 
 ### 引入依赖
 
-    <script src="path/to/build/datav.js"></script>
-    <script src="path/to/charts/pie.js"></script>
+```html
+<script src="path/to/build/datav.js"></script>
+<script src="path/to/charts/pie.js"></script>
+```
 
 ### 准备数据
 
-```
+```js
 var source = [
   ['北京', 50265],
   ['上海', 60555],
@@ -62,9 +68,10 @@ var source = [
   ['乌鲁木齐', 6695]
 ];
 ```
+
 ### 渲染图表
 
-```
+```js
 // 初始化组件
 var pie = new Pie("container", {width: 1000, tag: true});
 // 添加数据源
@@ -74,6 +81,7 @@ pie.render();
 ```
 
 ### 结果：
+
 ![Pie图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/pie.jpg)
 
 ## Requirements:
@@ -90,30 +98,34 @@ Thanks goes to the people who have contributed code to this library, see the [Gi
 
 Below is the output from `git-summary`
 
-```
- project  : my_datavjs
- repo age : 6 months
- active   : 154 days
- commits  : 424
- files    : 272
- authors  :
-   299  Jackson Tian            70.5%
-    46  jdk137                  10.8%
-    25  xie cong                5.9%
+```bash
+$ git summary 
+
+ project  : datavjs
+ repo age : 1 year
+ active   : 159 days
+ commits  : 431
+ files    : 276
+ authors  : 
+   305  Jackson Tian            70.8%
+    46  jdk137                  10.7%
+    25  xie cong                5.8%
     18  gozo1234                4.2%
     11  Theseue                 2.6%
      8  xiecong                 1.9%
-     7  wxtheseue               1.7%
+     8  wxtheseue               1.9%
      4  Jiang Dongke            0.9%
      3  郭方舟               0.7%
      2  unknown                 0.5%
      1  arcthur                 0.2%
 ```
 
 ## License
+
 DataV.js is available under the [MIT License](https://github.com/TBEDP/datavjs/blob/master/MIT-License).
 
 ## Contact
+
 组件由淘宝数据产品部可视化小组以及浙大CAD&CG可视化与可视分析小组共同开发
 开发联系人，有问题可咨询：
 
@@ -130,4 +142,3 @@ DataV.js is available under the [MIT License](https://github.com/TBEDP/datavjs/b
 - 浙大CAD&CG可视化与可视分析小组: [VAG Wiki](http://www.cad.zju.edu.cn/home/vagwiki/index.php)
 
 如有疑问，或发现Bug，也可[提交Bug](https://github.com/TBEDP/datavjs/issues/new)
-
diff --git a/example/gender/index.html b/example/gender/index.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>Gender Chart Demo</title>
+  <script src="../../build/deps.js"></script>
+  <script src="../../lib/datav.js"></script>  
+  <script src="../../lib/charts/gender.js"></script>  
+
+  <style type="text/css">
+  .gender_chart {
+    padding: 10px;
+    margin: 10px;
+    height: 235px;
+    width: 300px;
+    overflow: hidden;
+    float: left;
+  }
+  </style>
+</head>
+<body>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+<div class="gender_chart">
+</div>
+
+<script>
+var gender0 = new GenderChart($('.gender_chart:eq(0)'));
+gender0.render([99, 3]);
+
+var gender1 = new GenderChart($('.gender_chart:eq(1)'), {maleText: 'M', femaleText: 'W'});
+gender1.render([100, 0]);
+
+var gender2 = new GenderChart($('.gender_chart:eq(2)'));
+gender2.render([0, 100]);
+
+var gender3 = new GenderChart($('.gender_chart:eq(3)'));
+gender3.render([50, 50]);
+
+new GenderChart($('.gender_chart:eq(4)')).setSource([40, 60]).render();
+
+var gender5 = new GenderChart($('.gender_chart:eq(5)'));
+gender5.render([30, 70]);
+
+var gender6 = new GenderChart($('.gender_chart:eq(6)'));
+gender6.render([20, 80]);
+
+var gender7 = new GenderChart($('.gender_chart:eq(7)'));
+gender7.render([10, 90]);
+
+var gender8 = new GenderChart($('.gender_chart:eq(8)'));
+gender8.render([5, 95]);
+
+var gender9 = new GenderChart($('.gender_chart:eq(9)'));
+gender9.render([1, 99]);
+
+var gender10 = new GenderChart($('.gender_chart:eq(10)'));
+gender10.render([2, 98]);
+
+var gender11 = new GenderChart($('.gender_chart:eq(11)'));
+gender11.render([3, 97]);
+
+var gender12 = new GenderChart($('.gender_chart:eq(12)'));
+gender12.render([4, 96]);
+
+var gender13 = new GenderChart($('.gender_chart:eq(13)'));
+gender13.render([5, 95]);
+
+var gender14 = new GenderChart($('.gender_chart:eq(14)'));
+gender14.render([6, 94]);
+
+var gender15 = new GenderChart($('.gender_chart:eq(15)'));
+gender15.render([10, 90]);
+
+var gender16 = new GenderChart($('.gender_chart:eq(16)'));
+gender16.render([15, 85]);
+
+var gender17 = new GenderChart($('.gender_chart:eq(17)'));
+gender17.render([20, 80]);
+
+var gender18 = new GenderChart($('.gender_chart:eq(18)'));
+gender18.render([99, 1]);
+
+var gender19 = new GenderChart($('.gender_chart:eq(19)'));
+gender19.render([98, 2]);
+
+var gender20 = new GenderChart($('.gender_chart:eq(20)'));
+gender20.render([97, 3]);
+
+var gender21 = new GenderChart($('.gender_chart:eq(21)'));
+gender21.render([96, 4]);
+
+var gender22 = new GenderChart($('.gender_chart:eq(22)'));
+gender22.render([95, 5]);
+
+var gender23 = new GenderChart($('.gender_chart:eq(23)'));
+gender23.render([94, 6]);
+
+var gender24 = new GenderChart($('.gender_chart:eq(24)'));
+gender24.render([90, 10]);
+
+var gender25 = new GenderChart($('.gender_chart:eq(25)'));
+gender25.render([85, 15]);
+
+var gender26 = new GenderChart($('.gender_chart:eq(26)'));
+gender26.render([75, 25]);
+var gender27 = new GenderChart($('.gender_chart:eq(27)'));
+gender27.render([0, 0]);
+</script>
+</body>
+</html>