各種產生圓形圖表的 JavaScript 工具

這裡介紹一些可以在網頁上產生圓形圖表的 JavaScript 工具,透過這樣的設計可以讓網頁在呈現數值資料時更生動活潑。

circliful

circliful 是一個以 HTML5 canvas 與 jQuery 為基礎的 JavaScript 工具,可以在不需要使用圖檔的情況下,產生圓形圖表。


在使用前先引入 jQuery 與 circliful 的 CSS 與 JavaScript 檔:
<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
如果你有需要使用 Font Awesome,則還要再引入它的 CSS 檔:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
接著在網頁中要顯示圓形圖表的地方加上下面這段 HTML 程式碼,其中的選項則依照自己的狀況調整:
<div id="myStat"
  data-dimension="250"
  data-text="35%"
  data-info="測試數值"
  data-width="30"
  data-fontsize="38"
  data-percent="35"
  data-fgcolor="#61a9dc"
  data-bgcolor="#eee"
  data-fill="#ddd"
  data-total="200"
  data-part="35"
  data-icon="long-arrow-up"
  data-icon-size="28"
  data-icon-color="#fff" ></div>
最後再加上這段 JavaScript 程式碼,啟用 circliful。
<script>
$(document).ready(function() {
  $('#myStat').circliful();
});
</script>
這樣就完成了,請按下 按鈕觀看結果。


以下是各種參數的用途:
  • dimension:圖表大小,預設為 200,單位為 px。
  • text:在圓形圖表中要顯示的文字,這個會放置在 info 之上。
  • info:在圓形圖表中要顯示的資訊,這個會放置在 text 之下,如果不想顯示也可以設定為空字串。
  • width:圓圈的寬度,預設為 15,單位為 px。
  • fontsizetext 的字型大小,預設為 15,單位為 px。
  • percent:百分比,容許的範圍為 1100
  • fgcolor:圓圈的顏色,預設為 #556b2f
  • bgcolor:圓圈的背景顏色,預設為 #eee
  • fill:圓圈內部的背景顏色,若不想要讓圓圈有背景顏色,可設定為空字串。
  • type:設定圖表類型,可用的選項有 full(圓圈)與 half(半圓)兩種,預設為 full
  • totalpart:以比例指定數值,total 為分母,part 則是分子,circliful 會自動換算為百分比來顯示。
  • icon:Font Awesome 的 class 名稱(不含前端的 fa- 部分)。
  • icon-sizeicon 大小。
  • icon-coloricon 顏色。
  • animation-step:設定動畫速度,預設為 1,代表正常速度,0 代表停用動畫,0.5 代表慢速動畫,2 則代表加速動畫,以此類推。

Circles

Circles 是一個輕量化的 JavaScript 工具,可以產生 SVG 格式的圓形圖表,並且也支援動畫功能。


使用前先引入 circles.js 這個 JavaScript 檔:
<script src="circles.js"></script>
然後在網頁中要顯示圓形圖表的地方加上下面這行 HTML 程式碼:
<div id="circles-1"></div>
接著再加上下面這段 JavaScript 程式碼:
<script>
Circles.create({
  id:         'circles-1',
  percentage: 43,
  radius:     60,
  width:      10,
  number:     7.13,
  text:       '%',
  colors:     ['#D3B6C6', '#4B253A'],
  duration:   400
});
</script>
這樣就可以產生一個圓形圖表了,你也可以依照自己的需求,一次產生好幾個圓形圖表。請按下 按鈕觀看結果。


以下是各種參數的用途:
  • id:要產生圖表的 DOM 網頁元素。。
  • percentage:百分比。
  • radius:圓圈半徑。
  • width:圓圈寬度。
  • number:要顯示的數值,若沒有指定則會顯示百分比。
  • text:要顯示的文字,若沒有指定則不會顯示。
  • colors:圓圈的顏色,預設為 ['#EEE', '#F00']
  • duration:動畫時間,預設為 500,單位為千分之一秒。
另外你也可以透過 CSS 來自己調整圖表的外觀:
  • circles-wrp:整個圖表。
  • circles-text-wrp:文字與數值。
  • circles-text:文字。
  • circles-number:數值。

Percentage Loader

Percentage Loader 也是一個以 HTML5 canvas 與 jQuery 為基礎的 JavaScript 工具,不過功能與外觀上有些不同,除了產生圓形的圖表之外,還可以使用 JavaScript 動態控制圖表的數值,可以用於顯示即時的進度。


使用前要引入 jQuery 與 Percentage Loader 的 JavaScript 檔(可從 Bitbucket 下載):
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.percentageloader-0.1.js"></script>
然後在網頁中要顯示圖表的地方加上下面這行 HTML 程式碼:
<div id="percentage-loader"></div>
然後使用這段 JavaScript 啟用 Percentage Loader:
<script>
$("#percentage-loader").percentageLoader({
  width:    180,
  height:   180,
  progress: 0.5,
  value:    '512kb'
});
</script>
如果要更新進度,可以使用 .setProgress().setValue() 兩個函數:
<script>
var loader = $("#percentage-loader").percentageLoader();
loader.setValue('250kb');
loader.setProgress(0.5);
</script>
你也可以使用一個可由使用者控制的 loader 與回呼(callback)函數來更新圖表:
<script>
var loader;
loader = $("percentage-loader").percentageLoader({
  controllable : true,
  onProgressUpdate : function (value) {
    loader.setProgress(value * 100.0);
  }
});
</script>

請按下 按鈕觀看結果。


以下是各種參數的用途:
  • progress:設定進度,值為 01.0 之間。
  • value:設定顯示的數值。
  • width:寬度,預設為 256
  • height:高度,預設為 256
  • controllable:使用是否允許使用者控制圖表的數值,可用的選項為 truefalse
  • onProgressUpdate(value):指定更新數值用的回呼函數。
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站