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
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)