html5+Canvas仿支付寶芝麻信用儀錶板圖表和雷達圖表代碼

這是一款基於Canvas實現漂亮的仿支付寶芝麻信用信用評估儀錶板圖表和雷達圖表特效，Canvas圖表代碼。

js程式碼
<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>