2015年3月15日 星期日

jQuery Mobile - jqPlot (5)

泡泡圖 (Bubble Chart)

泡泡圖 (Bubble Chart) 為散佈圖的變化，泡泡圖常用以顯示財務資料，座標點以泡泡呈現，並以泡泡大小強調數值的大小。

為能執行泡泡圖，除了原有jQuery Mobile的css與js檔案之外，另需在<head></head>網頁標籤部份匯入以下檔案，與折線圖不同的是，需額外匯入jqplot.bubbleRenderer.min.js以繪製泡泡圖：
其程式部份如下，其中設定頁面ID為bubblechart、圖表ID為chart (可自行命名)，以做為繪製圖表的依據：
為設定圖表內容，在bubblechart.js檔案中分別定義以下內容：
var bubbledata = [
  [11, 123, 1236, "iPhone"], 
  [45,  92, 1067, "iPod Touch"], 
  [24, 104, 1176, "MacBook Air"], 
  [50,  23,  610, "iPad"], 
  [18,  17,  539, "iMac"], 
  [ 7,  89,  864, "New iPad"], 
  [ 2,  13, 1026, "iPad Air"]
];

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

var options = {
  title: '2014 Sales by Product',
  
  seriesDefaults:{
    renderer: $.jqplot.BubbleRenderer,
    rendererOptions: {
      bubbleGradients: true,
      bubbleAlpha: 0.6,
      highlightAlpha: 0.8
    },
    shadow: true,
    shadowAlpha: 0.05
  },
  
  axes: {
    xaxis: {
      label:'Sales',
      labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions:{angle:-45}
    },
    yaxis: {
      label:'US$',
      labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    }
  },
  cursor:{zoom:true}
};

$(document).on("pageshow","#bubblechart",function(e){
  bubbleplot = $.jqplot("chart", bubbledata, options);
});

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

$(document).on("pagehide","#bubblechart",function(e){
  bubbleplot.destroy();
});
圖表的選項與格式，分別設定如下，例如圖表標題 (Title)：
title: '2014 Sales by Product',
設定泡泡圖的預設值：
seriesDefaults:{
  renderer: $.jqplot.BubbleRenderer,
  rendererOptions: {
    bubbleGradients: true,
    bubbleAlpha: 0.6,
    highlightAlpha: 0.8
  },
  shadow: true,
  shadowAlpha: 0.05
},
設定座標軸 (Axis) 的標籤 (label)、刻度標籤的旋轉角度 (angle)：
axes: {
  xaxis: {
    label:'Sales',
    labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions:{angle:-45}
  },
  yaxis: {
    label:'US$',
    labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
  }
},
【執行結果】

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