Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/NewSexView.js

Created March 1, 2013 04:43
Show Gist options
  • Save ufologist/5062542 to your computer and use it in GitHub Desktop.
Save ufologist/5062542 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
male_female_chart.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.male_female {
padding-top: 10px;
margin: 10px auto;
height: 235px;
width: 300px;
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="NewSexView.js"></script>
<script>
$(function() {
// NewSexView($('.male_female'), [2632430, 1265245]);
NewSexView($('.male_female'), [123, 22]);
});
</script>
</head>
<body>
<div class="male_female">
</div>
</body>
</html>
Raw
NewSexView.js
/**
* 淘宝指数性别比例图
*
* @author Sun
* @version 2013-3-1
*
* 使用方法(依赖jQuery, raphael):
* NewSexView($('.male_female'), [2632430, 1265245]);
*
* DOM结构
* <div class="male_female">
* <svg>
* <desc>Created with Rapha?l 2.1.0</desc>
* <image x="42" y="167.5" width="50" height="51" href="T1aGvDXjXoXXbcKz6j-57-59.png" transform="matrix(0.9976,-0.0698,0.0698,0.9976,-13.2998,5.1438)" />
* <path style="" fill="#ff88a2" d="M150,117.5L100.43602146444279,39.39966689106362A92.5,92.5,0,0,0,100.43602146444277,195.60033310893635Z" transform="matrix(0.7071,-0.7071,0.7071,0.7071,-39.1511,140.481)" />
* <image x="204.5" y="13" width="50" height="51" ref="T1L9zDXd4qXXXAwuzj-56-58.png" transform="matrix(0.9976,-0.0698,0.0698,0.9976,-2.1266,16.1029)"/>
* <path style="" fill="#3fa9f5" d="M150,117.5L100.43602146444279,195.60033310893638A92.5,92.5,0,1,0,100.43602146444279,39.39966689106362Z" transform="matrix(0.7071,-0.7071,0.7071,0.7071,-39.1511,140.481)" />
* <circle cx="150" cy="117.5" r="72.5" fill="#ffffff" />
* <image x="120.5" y="87" width="59" height="61" href="T1xmPDXh8nXXaDpu6k-59-61.png" />
* <text x="10" y="102.17391304347827" text-anchor="middle"><tspan dy="4.673913043478265">女</tspan></text>
* <text x="18" y="129.17391304347825" text-anchor="middle"><tspan dy="10.173913043478251">32</tspan></text>
* <text x="43" y="132.17391304347825" text-anchor="middle"><tspan dy="6.173913043478251">%</tspan></text>
* <text x="260" y="87.03703703703704" text-anchor="middle"><tspan dy="4.537037037037038">男</tspan></text>
* <text x="268" y="114.03703703703704" text-anchor="middle"><tspan dy="10.037037037037038">68</tspan></text>
* <text x="293" y="117.03703703703704" text-anchor="middle"><tspan dy="6.037037037037038">%</tspan></text>
* </svg>
* </div>
*
* @see http://shu.taobao.com/trendindex?query=%E5%B0%8F%E7%B1%B3
* App.set("trend",Index.convert({
* "details": [{
* "sex": [2632430, 1265245]
* }]
* }));
* @see common.js
* r = e.details,
* i = {};
* i.genders = _.pluck(r, "sex") // genders = [[2632430, 1265245]]
* @see detail.js
* e.$(".male_female").each(function (e, t) {
* if (i.genders && i.genders[e]) {
* var n = new shu.NewSexView($(t));
* n.render(i.genders[e])
* }
* })
* @see detail.js
* NewSexView
*/
(function() {
// 角度转弧度
var N = Math.PI / 180;
function r(e, t, r, i, s, o, u) {
var a = e + r * Math.cos(-s * N),
f = e + r * Math.cos(-o * N),
l = t + r * Math.sin(-s * N),
c = t + r * Math.sin(-o * N);
return i.path(["M", e, t, "L", a, l, "A", r, r, 0, +(o - s > 180), 0, f, c, "z"]).attr(u);
}
function render($el, genders) {
if (genders.length !== 2) return;
var maleIcon = "http://img03.taobaocdn.com/tps/i3/T1L9zDXd4qXXXAwuzj-56-58.png",
femaleIcon = "http://img04.taobaocdn.com/tps/i4/T1aGvDXjXoXXbcKz6j-57-59.png",
genderIcon = "http://img04.taobaocdn.com/tps/i4/T1xmPDXh8nXXaDpu6k-59-61.png";
var male = genders[0],
female = genders[1],
per = 100 / (male + female),
malePercent = Math.round(per * male),
femalePercent = 100 - malePercent, // 获得男女占比
width = $el.width(),
height = $el.height(),
paper = Raphael($el[0], width, height),
halfWidth = width / 2,
halfHeight = height / 2,
max = (halfWidth > halfHeight ? halfHeight : halfWidth) - 25;
if (femalePercent > 0) { // 绘制女性占比扇形
// 绘制女性图标
paper.image(femaleIcon, halfWidth - max - 28.5 + 13, halfHeight + max - 29.5 - 13, 50, 51).rotate(-4);
var c = femalePercent / 100 * 360;
c === 360 && (c -= .01);
var h = r(halfWidth, halfHeight, max, paper, 180 - c / 2, 180 + c / 2, {
fill: "#ff88a2",
stroke: "none"
});
h.rotate(-45, halfWidth, halfHeight);
}
if (malePercent > 0) { // 绘制男性占比扇形
// 绘制男性图标
paper.image(maleIcon, halfWidth + max - 38, halfHeight - max - 12, 50, 51).rotate(-4);
var p = malePercent / 100 * 360;
p === 360 && (p -= .01);
var d = r(halfWidth, halfHeight, max, paper, -p / 2, p / 2, {
fill: "#3fa9f5",
stroke: "none"
});
d.rotate(-45, halfWidth, halfHeight);
}
// 男女占比的2个扇形会组合成一个实心圆
// 因此在中间覆盖一个较小的实心圆, 让图形变为同心圆效果
var v = paper.circle(halfWidth, halfHeight, max - 20).attr({
fill: "#ffffff",
stroke: "none"
});
// 圆形中间的男女图标
paper.image(genderIcon, halfWidth - 29.5, halfHeight - 30.5, 59, 61);
var m = {
label: {
"font-size": "14px",
fill: "#333333"
},
numberM: {
"font-size": "30px",
fill: "#3fa9f5"
},
numberF: {
"font-size": "30px",
fill: "#ff88a2"
},
percentM: {
"font-size": "18px",
fill: "#3fa9f5"
},
percentF: {
"font-size": "18px",
fill: "#ff88a2"
}
};
// 女性占比文字 -> 女32%
paper.text(10, height / 2.3, "女").attr(m.label);
paper.text(18, height / 2.3 + 27, femalePercent | 0).attr(m.numberF);
paper.text(43, height / 2.3 + 30, "%").attr(m.percentF);
// 男性占比文字 -> 男68%
paper.text(width - 40, height / 2.7, "男").attr(m.label);
paper.text(width - 32, height / 2.7 + 27, malePercent | 0).attr(m.numberM);
paper.text(width - 7, height / 2.7 + 30, "%").attr(m.percentM);
}
window.NewSexView = render;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment