2015年3月15日 星期日

jQuery Mobile - jqPlot (6)

儀錶圖 (Meter Gauge)

儀錶圖 (Meter Gauge) 如同汽車儀錶板，以半圓形的刻度顯示範圍值，儀錶圖常用以顯示值。此外，儀錶圖常搭配區間顏色，以顏色區分不同的範圍值。

為能執行儀錶圖，除了原有jQuery Mobile的css與js檔案之外，另需在<head></head>網頁標籤部份匯入以下檔案，與折線圖不同的是，需額外匯入jqplot.meterGaugeRenderer.min.js以繪製儀錶圖：
其程式部份如下，其中設定頁面ID為metergauge、圖表ID為chart (可自行命名)，以做為繪製圖表的依據：
為設定圖表內容，在metergauge.js檔案中分別定義以下內容：
// Enable Plugins
$.jqplot.config.enablePlugins = true;

var options = {
  title: 'Sales',

  legend: {
    show: true,
    location: 'ne',
    rendererOptions: {
      numberRows: 1
    }
  },

  axes: {
    xaxis: {
      autoscale:true,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickInterval: 1,
    },
    yaxis: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions:{prefix: '$'}
    }
  },
  cursor:{zoom:true}
};

$(document).on("pageshow","#metergauge",function(e){
  options['seriesDefaults']={fill:true};

  meterplot = $.jqplot('chart',[[375]],{
    title: 'Sales',
    seriesDefaults: {
      renderer: $.jqplot.MeterGaugeRenderer,
      rendererOptions: {
        label: 'US$',
        min: 0,
        max: 500,
        intervals:[50, 150, 300, 500],
        intervalColors:['#FF0000', '#FF6600', '#FFFF66', '#00FF00']
      }
    },
    cursor:{zoom:true}
  });
});

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

$(document).on("pagehide","#metergauge",function(e){
  meterplot.destroy();
});
分別設定儀錶圖的標籤 (label)、最小值 (min)、最大值 (max)、區間 (intervals)、區間顏色 (intervalColors)：
seriesDefaults: {
  renderer: $.jqplot.MeterGaugeRenderer,
  rendererOptions: {
    label: 'US$',
    min: 0,
    max: 500,
    intervals:[50, 150, 300, 500],
    intervalColors:['#FF0000', '#FF6600', '#FFFF66', '#00FF00']
  }
},
【執行結果】

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