各種產生圓形圖表的 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。
fontsize：text 的字型大小，預設為 15，單位為 px。
percent：百分比，容許的範圍為 1 到 100。
fgcolor：圓圈的顏色，預設為 #556b2f。
bgcolor：圓圈的背景顏色，預設為 #eee。
fill：圓圈內部的背景顏色，若不想要讓圓圈有背景顏色，可設定為空字串。
type：設定圖表類型，可用的選項有 full（圓圈）與 half（半圓）兩種，預設為 full。
total 與 part：以比例指定數值，total 為分母，part 則是分子，circliful 會自動換算為百分比來顯示。
icon：Font Awesome 的 class 名稱（不含前端的 fa- 部分）。
icon-size：icon 大小。
icon-color：icon 顏色。
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：設定進度，值為 0 到 1.0 之間。
value：設定顯示的數值。
width：寬度，預設為 256。
height：高度，預設為 256。
controllable：使用是否允許使用者控制圖表的數值，可用的選項為 true 或 false。
onProgressUpdate(value)：指定更新數值用的回呼函數。

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

circliful

Circles

Percentage Loader

沒有留言:

張貼留言

熱門文章