環形百分比控件iantoo.percent()

原文連接

使用

引入文件:

./build/js/iantooPercent.js

並在頁面執行

<canvas id="iantooPercent" style="width: 150px;height: 150px"> </canvas>
<script type="text/javascript" src="../../build/js/iantooPercent.js"></script>
<script type="text/javascript">
    iantoo.percent({
        el:'iantooPercent'
    })

既可正常顯示以下

該模塊不依賴任何三方模塊，並於iantoo系列其它功能可同時存在。

兼容性

全部支持 canvas的瀏覽器均支持該模塊

能夠參考canvas基本支持屬性

預覽

iantooPercent

Github

API

el

canvas對應的ID名稱,必填。

模塊最終使用 querySelector方法進行DOM 查找,並自動添加 #爲id查找。

line

指邊線,也就是背景中的整圓。

line.size

非必填、 number,默認:4

邊線的粗細。

line.color

非必填、 string,默認:'#D3EDFD'，十六進制顏色值。

邊線的顏色。

subject

主要旋轉部分的樣式設置

subject.size

非必填、 number,默認:8。

旋轉主線條的粗細。

subject.color

非必填、 string,默認:'#57C0FD'，十六進制顏色值。

旋轉的主線條的顏色。

subject.Start_Position

非必填、 number,默認:0，取值:0,1,2,3。

制旋轉主線條的開始位置，取值:0,1,2,3 ;按照時鐘的時間說明 0表明從00點鐘方向開始; 1表明是3點鐘方向,依此類推 。

subject.percentage

非必填、 number,默認:0，取值:0～1。

旋轉的百分比，取值在0～1之間，若是浮點數在小數點後三位的數，不會進行四捨五入，而是經過直接取小數點後面兩位數爲準。

subject.content

非必填、 string,默認:'附加文字'

除顯示百分比數字之外，的附加內容顯示文字，將顯示在百分比內容下面，此處並未對傳入字符長度作限制。

perStyle

百分比文字樣式

perStyle.fontSize

非必填、 number,默認:30。

百分比文字大小,會經過subject.percentage的值自動計算百分數的數字並添加百分號。

perStyle.color

非必填、 string,默認:'#EF5A3C'。

百分比文字現實的顏色。

contentStyle.

附加內容的樣式

contentStyle.fontSize

非必填、 number,默認:16。

附加文字內容顯示的字體大小

contentStyle.color

非必填、 string,默認:'#77828C'。

附加內容的文字顏色。

注：該模塊必須對canvas標籤設置style的寬高屬性，或者經過class屬性指定寬高。源碼中會經過獲取canvas的offsetWidth和offsetHeight去從新設置canvas的width和height屬性，但這並不影響自身style屬性下所對應顯示的大小。