html5+Canvas 모방 Alipay Sesame Credit 대시보드 차트 및 레이더 차트 코드

아름다운 모조 Alipay Sesame Credit 신용평가 대시보드 차트와 레이더 차트 특수 효과를 Canvas 기반으로 구현한 Canvas 차트 코드입니다.

JS 코드
<script src="chart.meter.js"></script>
<script src="chart.radar.js"></script>
<스크립트>
window.onload = 함수(){
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 } },
하지만 {텍스트: '직장 활력', 최대: 190, 아이콘: {sx: 93, sy: 0, w: 31, h: 33, l: 0}},
하지만 ],
제목: '{v}',
데이터: [130, 130, 130, 148, 150],
스타일: {
            라벨: {
                이미지: 'icon.png'
            }
        }
    }).init();
}