Peity - Cover

想要有個圖表,但你的資料很簡單,不想搞得太複雜嗎?繪圖軟體、線上圖表工具通通丟掉,在你的網頁裡裝上這個 jQuery Plugin 吧!「 Peity 」讓你只要把資料填在網頁中,自動就幫你變成圓餅圖、長條圖、線圖等等的迷你圖表,而且還可以使用 CSS 增添樣式!小巧好用的工具,這次讓小編來幫大家介紹一下吧!

平常寫文章時偶而我們想要提供數據或資料的簡易資訊,卻不想打斷讀者的閱讀體驗,這時一種特殊的圖表類型「 Sparkline 」便派上用場。 Sparkline 是一種迷你線圖,通常缺乏軸線刻度資訊,而且跟一行文字一樣小,因此可以放到字裡行間中。右邊即是一個 Sparkline 的例子:5,3,2,-1,-3,-2,2,3,5,2

雖然面積小,但前後文的描述使得圖表產生意義,這時線段的走勢雖然不帶刻度,仍可以提供讀者足夠程度的視覺線索來對資料做更深入的理解。

Sparkline 最初由 Edward Tufte 教授命名,現在不光是線圖,一般面積小而可以置入行間的迷你圖也都可以稱為 Sparkline 了;這次要介紹的 jQuery Peity 即可以幫我們產生這樣的圖形。

前置作業

為了讓 Peity 幫我們產生迷你圖,首先我們在網頁中引入由專案網頁下載的 Peity 函式庫「 jquery.peity.min.js 」並透過 Peity 呼叫圓餅圖產生函式 Peity(“pie"):

  <script type="text/javascript" src="jquery.peity.min.js"></script>
  <script type="text/javascript">
    $(".pie").peity("pie");
  </script>

接著,我們只要把帶有 pie 類別的標籤放在網頁中,並提供相對應的數值即可,舉例來說:

<div class="pie">1,1</div>

上例會畫出一個如右的對半切圓餅圖 「 1,1」。如果放大一點來看的話:

Peity Example

div 裡面的數值單純就只是將我們的資料以逗號分隔的方式列出, Peity 會主動為我們解析成高度、比例等等的概念。下例則一次產生了十個這樣的圓餅圖,每個圓餅都有五個區塊:

  <span class="pie">4,2,2,7,8</span>
  <span class="pie">5,0,2,8,9</span>
  <span class="pie">1,3,1,9,6</span>
  <span class="pie">1,4,0,2,9</span>
  <span class="pie">6,6,1,6,0</span>
  <span class="pie">0,7,8,7,0</span>
  <span class="pie">1,8,5,8,8</span>
  <span class="pie">6,6,8,5,0</span>
  <span class="pie">1,4,2,3,1</span>
  <span class="pie">3,1,4,9,9</span>

對應的結果如右:4,2,2,7,85,0,2,8,91,3,1,9,61,4,0,2,96,6,1,6,00,7,8,7,01,8,5,8,86,6,8,5,01,4,2,3,13,1,4,9,9

其它圖表類型

不光只是圓餅圖, Peity 還可以繪製線圖、長條圖跟甜甜圈圖。要畫出各種不同的圖表,只要在前置作業的時候呼叫對應的 Peity 函式即可:

  <script type="text/javascript">
    $(".pie").peity("pie");
    $(".donut").peity("donut");
    $(".line").peity("line");
    $(".bar").peity("bar");
  </script>

接著,製作圖的方式如出一轍:

  <span class="pie">1,2,3</span>
  <span class="donut">1,2,3</span>
  <span class="line">1,2,3</span>
  <span class="bar">1,2,3</span>

結果如右: 1,2,31,2,31,2,31,2,3

客製化

當然,光是畫出這樣的圖表不夠有意思, Peity 讓我們可以做一定程度的客製化。可以調整的參數包括「fill (填色)」、「stroke (外框色)」、「strokeWidth (框寬)」、「width / height (寬 / 高)」、「min / max (最小 / 最大值 )」、「delimiter (分隔符號)」等等,我們將參數編寫成 JSON 格式後,可以透過兩種方式來使用:

  1. 直接標示在標籤內的「data-peity」屬性中:
    <span class="pie" data-peity='{“fill": [“#ff0000″,"#00ff00″]}’>1,2</span>
  2. 在呼叫 Peity 初始化函式時當成第二個參數代入:
    $(“.pie").peity(“pie", {“fill":[“#ff0000″,"#00ff00″]});

填色時我們可以一次提供多個顏色來幫圖表著上不同顏色,例如下例我們便為 Pie Chart 提供了五種顏色:

  <span class="pie" data-peity='{"fill":["#1e0c0b","#5c1a12","#bb260d","#a58168","#71543b"]}'>1,3,2,4,5</span>

以這樣的顏色著色的圓餅圖會類似下圖 ( 放大版 ):

Example 2

設定樣式表

由於 Peity 的原理是在所有找到的設定標籤後面插入一個繪圖用的 SVG 標籤,所以我們其實也可以用 CSS 來為圖表做設定。比方說,我們可以增加一種特殊的長條圖「bar-full」,他自己獨立一行呈現並且放大到 900px x 200px :

<styl type="text/css">
  .bar-full + svg {
    display: block;
    width: 900px;
    height: 200px;
    margin: auto;
  }
</style>
<span class="bar-full">5,4,7,2,3,1,2</span>

上例會得到類似下圖的結果:

Example 3 ( 單色版 )

更甚者,連 SVG 內的形狀我們都可以用 CSS 控制,下例為各個長條分別著色:

.bar-full + svg > rect:nth-of-type(n + 1) { fill: #71543b; }
.bar-full + svg > rect:nth-of-type(n + 2) { fill: #ebd8bc; }
.bar-full + svg > rect:nth-of-type(n + 3) { fill: #f0bc15; }
// 下略

這段 CSS 設定會產生如下的效果:

Example 3

這代表了做動畫也是可以的,例如下面的設定:

  @keyframes change {
    0% {
      fill: #f00;
    }
    100% {
      fill: #0f0;
    }
  }
  span.bar-animate + svg > rect {
    animation: change 1s linear infinite;
  }

會讓我們的圖表顏色不斷變換喔:

你可以在這裡找到上例的原始碼。


結語

Peity 是一個相當方便的輔助函式,我們只要填幾個簡單的值就可以自動產生圖表,除了基本的四種圖表外,還可以做簡單的客製化,有必要也可以用 CSS 追加額外的設定,可說是十分好用。

當然,產生 Sparkline 原本的目的便是在有限的空間內做最有效率的利用,這裡展示放大 Sparkline 或動畫的效果僅是在說明這類型在網頁內直接插入的圖表我們便有更大的調整空間。Peity 大致上就介紹這邊,未來讀者們有需要插入這類迷你圖表時,別忘了考慮用用看 Peity 喔!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *