2015年3月15日 星期日

jQuery Mobile - jqPlot (3)

長條圖 (Bar Chart)

長條圖 (Bar Chart) 用以顯示一段時間內資料的變化或比較不同項目間的差異，可分為水平長條圖、垂直長條圖與堆疊長條圖。

為能執行長條圖，除了原有jQuery Mobile的css與js檔案之外，另需在<head></head>網頁標籤部份匯入以下檔案，與折線圖不同的是，需額外匯入jqplot.barRenderer.min.js與jqplot.categoryAxisRenderer.min.js以繪製長條圖：
其程式部份如下，其中設定頁面ID為barchart、圖表ID為chart (可自行命名)，以做為繪製圖表的依據：
為設定圖表內容，在barchart.js檔案中分別定義以下內容：
var bardata  = [
  [150,290,215,315], // Series 1
  [110,480,106,285], // Series 2
  [430,368,115,162], // Series 3
  [152,412,311,223]  // Series 4
];

// Enable Plugins
$.jqplot.config.enablePlugins = true;

var options = {
  title:'Regional Sales',
  
  seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    shadowAngle: 45
  },

  series: [
    {label:'2011',color:'#2562AD'},
    {label:'2012',color:'#FF0022'},
    {label:'2013',color:'#FFFF66'},
    {label:'2014',color:'#33DA22'},
  ],

  legend: {
    show: true,
    location: 'ne',
  },

  axes: {
    xaxis: {
      label:'Region',
      renderer: $.jqplot.CategoryAxisRenderer,
      ticks: ['East','West','North','South'],
    },
    yaxis: {
      label:'US$',
      min:0,
      max:500,
      labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    }
  },

  cursor:{zoom:true}
};

$(document).on("pageshow","#barchart",function(e){
  barplot = $.jqplot("chart", bardata, options);
});

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

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

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

$(document).on("pagehide","#barchart",function(e){
  barplot.destroy();
});
圖表數例以下列方式設定，共有四組長條數例：
var bardata  = [
  [150,290,215,315], // Series 1
  [110,480,106,285], // Series 2
  [430,368,115,162], // Series 3
  [152,412,311,223]  // Series 4
];
此外圖表的選項與格式，分別設定如下，例如圖表標題 (Title)：
title:'Regional Sales',
設定各長條數例的預設值如陰影角度 (shadowAngle)：
seriesDefaults: {
  renderer: $.jqplot.BarRenderer,
  shadowAngle: 45
},
設定各長條數例的標籤 (label) 與顏色 (color)：
series: [
  {label:'2011',color:'#2562AD'},
  {label:'2012',color:'#FF0022'},
  {label:'2013',color:'#FFFF66'},
  {label:'2014',color:'#33DA22'},
],
設定圖例 (Legend) 的置放位置 (location) 與是否顯示圖例 (show)：
legend: {
  show: true,
  location: 'ne',
},
設定座標軸 (Axis) 的標籤 (label)、刻度標籤 (ticks)、刻度的最小值 (min)、刻度的最大值 (max)：
axes: {
  xaxis: {
    label:'Region',
    renderer: $.jqplot.CategoryAxisRenderer,
    ticks: ['East','West','North','South'],
  },
  yaxis: {
    label:'US$',
    min:0,
    max:500,
    labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
  }
},
【執行結果】

以下為以Android智慧型手機瀏覽器執行的垂直長條圖，由於智慧型手機直立時，畫面較窄，因此圖表會自動調整長寬比例：
以下為以Apple iPad平版電腦瀏覽器執行的垂直長條圖，由於平版電腦橫向時，畫面較寬，因此可得到較佳的效果：
水平長條圖 (Horizontal Bar Chart)

水平長條圖 (Horizontal Bar Chart) 的設定幾乎與垂直長條圖一樣，差別僅在於需加入barDirection選項以設定長條圖的方向：
seriesDefaults: {
  renderer: $.jqplot.BarRenderer,
  shadowAngle: 45,
  rendererOptions: {
    barDirection: 'horizontal'
  }
},
【執行結果】

以下為以Android智慧型手機瀏覽器執行的水平長條圖：
以下為以Apple iPad平版電腦瀏覽器執行的水平長條圖：
堆疊長條圖 (Stack Bar Chart)

堆疊長條圖 (Stack Bar Chart) 的設定幾乎與垂直長條圖一樣，差別僅在於需加入stackSeries選項以設定為堆疊長條圖：
stackSeries: true,
【執行結果】

以下為以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)