基于jQuery Mobile的图表应用JQMCharts

来源：互联网发布：阿里二手域名编辑：程序博客网时间：2024/05/21 10:19

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。

0 0