mirror of
https://github.com/TBEDP/datavjs.git
synced 2025-12-08 19:45:52 +00:00
177 lines
3.8 KiB
HTML
177 lines
3.8 KiB
HTML
<!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> |