html5 + キャンバス模造 Alipay Sesame Credit ダッシュボード チャートとレーダー チャート コード

これは、Canvas に基づいた美しい模造 Alipay Sesame Credit 信用評価ダッシュボード チャートとレーダー チャートの特殊効果を実装する Canvas チャート コードです。

jsコード
<script src="chart.meter.js"></script>
<script src="chart.radar.js"></script>
<スクリプト>
window.onload = function(){
Meter.setOptions({
要素: 'メーター'、
センターポイント: {
x: 180、
y:180
},
半径: 180、
データ: {
値: 710、
'職場の競争力{t}'、
サブタイトル: 「評価時期: 2015.07.28」、
エリア: [{
最小: 350、最大: 550、テキスト: 「弱い」
}、{
最小: 550、最大: 600、テキスト: 「一般」
}、{
最小: 600、最大: 650、テキスト: 「非常に強い」
}、{
最小: 650、最大: 700、テキスト: 「スーパー」
}、{
最小: 700、最大: 950、テキスト: 「非常に強い」
}]
}
}).init();

Radar.setOptions({
要素: 「レーダー」、
半径: 140、
極地: [
「履歴書情報」、最大: 190、アイコン: { 「職場のアイデンティティ」、最大: 190、アイコン: { sx: 32、sy: 0、w: 30、h: 33、l: 30、t: -30 } },
{テキスト: 'Nine Bo Grows'、MAX: 190、アイコン: {SX: 61、SY: 0、W: 32、H: 33、L: 0}}、
「職場の活力」、最大: 190、アイコン: { sx: 93、sy: 0、w: 31、h: 33、l: -40、t: 0 } },
{テキスト: 'ソーシャル ネットワーク'、最大: 190、アイコン: {sx: 124、sy: 0、w: 29、h: 33、l: -60}}

]、
タイトル: '{v}'、
データ: [130, 130, 130, 148, 150],
スタイル: {
ラベル: {
画像: 'icon.png'
}
}
}).init();
}
</スクリプト>