<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Canvas仿支付宝芝麻信用仪表盘图表和雷达图表代码</title> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="renderer" content="webkit"> | |
<style> | |
#box { | |
width: 1000px; | |
text-align: center; | |
margin: 100px auto; | |
} | |
</style> | |
</head> | |
<body><script src="/demos/googlegg.js"></script> | |
<div id="box"> | |
<canvas id="meter" width="360" height="220"></canvas> | |
<canvas id="radar" width="538" height="370"></canvas> | |
</div> | |
<script src="chart.meter.js"></script> | |
<script src="chart.radar.js"></script> | |
<script> | |
window.onload = function(){ | |
Meter.setOptions({ | |
element: 'meter', | |
centerPoint: { | |
x: 180, | |
y: 180 | |
}, | |
radius: 180, | |
data: { | |
value: 710, | |
title: '职场竞争力{t}', | |
subTitle: '评估时间:2015.07.28', | |
area: [{ | |
min: 350, max: 550, text: '较弱' | |
},{ | |
min: 550, max: 600, text: '一般' | |
},{ | |
min: 600, max: 650, text: '很强' | |
},{ | |
min: 650, max: 700, text: '超强' | |
},{ | |
min: 700, max: 950, text: '极强' | |
}] | |
} | |
}).init(); | |
Radar.setOptions({ | |
element: 'radar', | |
radius: 140, | |
polar: [ | |
{ text: '简历信息', max: 190, icon: { sx: 0, sy: 0, w: 32, h: 33, l: -17, t: -60 } }, | |
{ text: '职场身份', max: 190, icon: { sx: 32, sy: 0, w: 30, h: 33, l: 30, t: -30 } }, | |
{ text: '九博成长', max: 190, icon: { sx: 61, sy: 0, w: 32, h: 33, l: 10, t: 0 } }, | |
{ text: '职场活力', max: 190, icon: { sx: 93, sy: 0, w: 31, h: 33, l: -40, t: 0 } }, | |
{ text: '人脉社交', max: 190, icon: { sx: 124, sy: 0, w: 29, h: 33, l: -60, t: -30 } } | |
], | |
title: '{v}', | |
data: [130, 130, 130, 148, 150], | |
styles: { | |
label: { | |
image: 'icon.png' | |
} | |
} | |
}).init(); | |
} | |
</script> | |
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> | |
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> | |
<p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p> | |
</div> | |
</body> | |
</html> | |
联系客服