基于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。