2015年3月15日 星期日

jQuery Mobile - jqPlot (2)

圓形圖 (Pie Chart)

圓形圖 (Pie Chart) 又稱為圓餅圖,圓形圖將圖表劃分成幾個不同比例的扇形區域 (Slice),藉以描述量、頻率或百分比之間的相對關係,在圓形圖中,每個扇形區域的面積大小代表數量的比例,由於圓形圖以面積取代長度表達相對關係,反而加大了對各數據比較的難度,因此若需要進行數據比較,建議使用折線圖或長條圖。

為能執行圓形圖,除了原有jQuery Mobile的css與js檔案之外,另需在<head></head>網頁標籤部份匯入以下檔案,與折線圖不同的是,需額外匯入jqplot.pieRenderer.min.js以繪製圓形圖:
 







其程式部份如下,其中設定頁面ID為piechart、圖表ID為chart (可自行命名),以做為繪製圖表的依據:
至於圖表內容,jqPlot是以額外的JavaScript設定,可定義於同一HTML網頁中或其他的JavaScript檔案,若為後者,則需在<head></head>網頁標籤部份匯入,例如一名為piechart.js檔案,則如下匯入JavaScript檔案:

為設定圖表內容,在piechart.js檔案中分別定義以下內容:
$.jqplot.config.enablePlugins = true;

$(document).on('pageshow','#piechart',function(e){
  var piedata = [
    ['New iPad',    3850],
    ['iPhone',      5700],
    ['MacBook Air', 2000],
    ['iMac',        1200]
  ];

  var opts = {
    title:'2014 Sales Data',
    
    seriesDefaults: {
      renderer: jQuery.jqplot.PieRenderer, 
      rendererOptions: {
        showDataLabels: true,
        padding: 8
      }
    },
    
    legend :{ 
      show:true, 
      location: 'e',
      rendererOptions: {
        numberRows: 4
      },
    }
  }

  pieplot = $.jqplot('chart', [piedata], opts);
});

$(window).on("orientationchange", function(e){
  pieplot.replot();
});

$(document).on("pagehide", "#piechart", function(e){
  pieplot.destroy();
});
以下程式分別設定當顯示頁面時則繪製圖表 (pageshow)、當手機或平版電腦改變方向時 (orientationchange)、當隱藏或關閉頁面時 (pagehide),其中piechart與chart分別為前述之頁面ID與圖表ID,以做為繪製圖表的依據:
$(document).on('pageshow','#piechart',function(e){
  ...
  pieplot = $.jqplot('chart', [piedata], opts);
});

$(window).on("orientationchange", function(e){
  pieplot.replot();
});

$(document).on("pagehide", "#piechart", function(e){
  pieplot.destroy();
});
圖表數例以下列方式設定,共有四個扇形區域:
var piedata = [
  ['New iPad',    3850],
  ['iPhone',      5700],
  ['MacBook Air', 2000],
  ['iMac',        1200]
];
此外圖表的選項與格式,分別設定如下,例如圖表標題 (Title):
title:'2014 Sales Data',
設定各扇形區域的預設值:
seriesDefaults: {
  renderer: jQuery.jqplot.PieRenderer, 
  rendererOptions: {
    showDataLabels: true,
    padding: 8
  }
},
設定圖例 (Legend) 的置放位置 (location)、是否顯示圖例 (show)、圖例列數 (numberRows):
legend :{ 
  show:true, 
  location: 'e',
  rendererOptions: {
    numberRows: 4
  },
}
【執行結果】

以下為以Android智慧型手機瀏覽器執行的結果:
以下為以Apple iPad平版電腦瀏覽器執行的結果:
分裂式圓形圖 (Slice Pie Chart)

分裂式圓形圖 (Slice Pie Chart) 的設定幾乎與圓形圖一樣,差別僅在於需加入以下選項以分割扇形區域,包括是否填滿扇形區域 (fill)、扇形區域之間的間距 (sliceMargin)、扇形區域的線條寬度 (lineWidth):
seriesDefaults: {
  renderer: jQuery.jqplot.PieRenderer, 
  rendererOptions: {
    fill: true,
    showDataLabels: true, 
    sliceMargin: 10, 
    lineWidth: 2
  }
},
【執行結果】

以下為以Android智慧型手機瀏覽器執行的結果:
以下為以Apple iPad平版電腦瀏覽器執行的結果:
【參考資料】

[1] XAMPP:https://www.apachefriends.org
[2] jQuery Mobile:http://jquerymobile.com
[3] jQuery:http://jquery.com
[4] jqPlot:http://www.jqplot.com

© Chia-Hui Huang

沒有留言:

張貼留言