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。