1. 程式人生 > >jQuery easy pie chart 外掛使用(基於HTML5)

jQuery easy pie chart 外掛使用(基於HTML5)

EASY PIE CHART是一個輕量級的jQuery外掛,主要用來渲染和製作漂亮的餅圖及動畫效果,基於與HTML5的canvas元素。

配置引數

您可以通過一組這些選項的初始化函式來設定一個自定義的行為,並尋找外掛。

這個外掛支援支援canvas元素所有主流瀏覽器。隨著excanvas你甚至可以呈現在IE 7 +8的圖表。

屬性 預設 描述
barColor #ef1e25 該curcular欄的顏色。你可以通過像RGB,RGBA十六進位制或字串顏色任一有效的CSS顏色字串。但你也可以通過接受目前的百分比值來返回一個動態生成的顏色的功能。
trackColor #f2f2f2 賽道的欄的顏色,假以禁用渲染。
scaleColor #dfe0e0 刻度線的顏色,假以禁用渲染。
lineCap round 定義瞭如何在棒材生產線的結局看起來像。可能的值有:對接圓形方形
lineWidth 3 寬度畫素的棒材生產線的。
size 110 大小畫素餅圖。這將永遠是一個正方形。
animate false 時間以毫秒為單位的酒吧越來越多的緩解動畫,或虛假停用。
onStart $.noop 那個叫於任何動畫(僅當動畫是不是假的)開始回撥函式。
onStop $.noop 這就是所謂在任何動畫的結尾(僅當動畫是不是假的)的回撥函式。
onStep $.noop 這是在動畫提供的當前值呼叫的回撥函式(上下文是外掛,這樣你就可以通過訪問DOM元素這一點。$ EL)。

使用:

先載入所需要的檔案

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script>
<link rel="stylesheet"type="text/css" href="/path/to/jquery.easy-pie-chart.css">

HTML部分

<div data-percent="73">73%</div>

呼叫:

<script type="text/javascript"> $(function() {    

//create instance    

$('.chart').easyPieChart({        

animate: 2000    

});    

//update instance after 5 sec    

setTimeout(function() {        

$('.chart').data('easyPieChart').update(40);    

}, 5000); });

</script>