基於jQuery Mobile的圖表應用JQMCharts

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

JQMCharts是一款基於jQuery Mobile的移動圖表應用，同時也是jQuery Mobile的一個擴充套件。和MPAndroidChart類似，JQMCharts也支援3種圖表型別，柱形圖、餅圖以及線性圖。但是和MPAndroidChart相比，功能相對比較簡單，對於一般的移動應用，JQMCharts也基本可以勝任。

JQMCharts的特點

• 基於jQuery Mobile，jQuery的相容性本來就不錯，因此JQMCharts對大部分移動裝置和瀏覽器也基本都支援。
• 可動態改變圖表的資料，利用滑竿改變圖表引數即可。
• 自適應各種解析度的移動裝置。

JQMCharts的使用方法

首先引入jQuery和jQuery Mobile相關的指令碼庫以及CSS庫：

<link href="/content/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" />
<link href="/content/jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script src="/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/underscore-min.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/hideAddressBar.js" type="text/javascript"></script>
<script src="/Scripts/jqmcharts/app.js" type="text/javascript"></script>

柱形圖：

JavaScript程式碼

RocknCoder.Pages.manageBarChart = function () {
	var pageshow = function () {
			updateChart();
			$("#refreshBarChart").click(function(){
				updateChart();
			});
		},
		pagehide = function () {
			$("#refreshBarChart").unbind('click');
		},
		updateChart= function(){
			var barA = parseInt($("#pageBarSliderA").val(),10),
				barB = parseInt($("#pageBarSliderB").val(),10),
				barC = parseInt($("#pageBarSliderC").val(),10);
			showChart(barA, barB, barC);
		},
		showChart = function(barA, barB, barC){
			$.jqplot('barChart', [[[barA,1], [barB,3], [barC,5]]], {
				seriesDefaults:{
					renderer:$.jqplot.BarRenderer,
					shadowAngle: 135,
					rendererOptions: {
						barDirection: 'horizontal'
					},
					pointLabels: {show: true, formatString: '%d'}
				},
				axes: {
					yaxis: {
						renderer: $.jqplot.CategoryAxisRenderer
					}
				}
			}).replot({clear: true, resetAxes:true});
		};
	return {
		pageshow: pageshow,
		pagehide: pagehide
	}
}();

效果圖：

餅圖：

JavaScript程式碼

RocknCoder.Pages.managePieChart = function () {
	var pageshow = function () {
			updateChart();
			$("#refreshPieChart").click(function(){
				updateChart();
			});
		},
		pagehide = function () {
			$("#refreshPieChart").unbind('click');
		},
		updateChart= function(){
			var sliceA = parseInt($("#pagePieSliderA").val(),10),
				sliceB = parseInt($("#pagePieSliderB").val(),10),
				sliceC = parseInt($("#pagePieSliderC").val(),10);
			showChart(sliceA, sliceB, sliceC);
		},
		showChart = function(sliceA, sliceB, sliceC){
			var plot2 = $.jqplot('pieChart', [[['a',sliceA],['b',sliceB],['c',sliceC]]], {
					grid: {
						drawBorder: false,
						shadow: false
					},
					seriesDefaults:{
						renderer:$.jqplot.PieRenderer,
						trendline:{ show: true }
					},
				legend:{ show: false }
			});
		};
	return {
		pageshow: pageshow,
		pagehide: pagehide
	}
}();

效果圖：

線性圖：

JavaScript程式碼

RocknCoder.Pages.managePlotChart = function () {
	var pageshow = function () {
			updateChart();
			$("#refreshPlotChart").click(function(){
				updateChart();
				$.mobile.silentScroll();
			});
		},
		pagehide = function () {
			$("#refreshPlotChart").unbind('click');
		},
		updateChart= function(){
			var sliders = $($.mobile.activePage).find("input"),
				vals = [];
			_.each(sliders,function(element, index){
				vals.push([index+1, parseInt(element.value, 10)]);
			});
			showChart(vals);
		},
		showChart = function(vals){
			$.jqplot('plotChart',[vals]).replot({clear: true, resetAxes:true});
		};
	return {
		pageshow: pageshow,
		pagehide: pagehide
	}
}();

效果圖：

總體而言，JQMCharts的使用和配置還是挺方便的，如果你要在移動頁面中使用資料圖表，那麼可以嘗試一下JQMCharts。

軟體首頁 軟體下載