操作系统: android 2.3
程序框架: phonegap + jquery mobile
三种图表插件: JS Chart 、 RGraph 、jqplot
JS Chart | RGraph | jqplot | |
依赖js库 | 无 | 无 | Jquery |
优点 | 使用简单,文档丰富,功能强大,美观,有动态效果 | 使用较简单,文档一般,有动态效果 | 使用较简单,文档较全 |
缺点 | 饼图无动态生成效果,个人版有水印 | 低端设备运行动态效果不流畅 | 无动态生成效果 |
是否免费 | 个人免费 | 是 | 是 |
chart.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 --> <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" /> <!-- <link href="js/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> --> <link type="text/css" href="css/index.css" rel="stylesheet" /> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.0.1.min.js"></script> <script src="js/twmdf-core.js"></script> <script src="js/jscharts.js"></script>
<script src="js/RGraph.bar.js"></script> <script src="js/RGraph.pie.js"></script> <script src="js/RGraph.line.js"></script> <script src="js/RGraph.common.core.js"></script> <script src="js/RGraph.common.effects.js"></script> <script src="js/RGraph.common.context.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" /> <script charset="utf-8" src="js/jquery.jqplot.min.js"></script> <script charset="utf-8" src="js/jqplot.pieRenderer.min.js"></script> <script charset="utf-8" src="js/jqplot.barRenderer.min.js"></script> <script charset="utf-8" src="js/jqplot.categoryAxisRenderer.min.js"></script> <script charset="utf-8" src="js/jqplot.canvasAxisTickRenderer.min.js"></script> <script charset="utf-8" src="js/jqplot.canvasTextRenderer.min.js"></script> <script src="js/chart.js"></script> </head> <body > <div data-role="page" id="chart" > <div data-role="header" data-position="fixed" data-theme="b" > <h1>chart</h1> </div>
<div data-role="content" id="chartContent" > <div id='chartcontainer' class='chartcontainer'> 图表 </div> <div class='ui-grid-b'> <div class='ui-block-a'> <a data-role='button' data-theme='b' onclick='drawPieChart("chartcontainer")'>饼图</a> </div> <div class='ui-block-b'> <a data-role='button' data-theme='b' onclick='drawBarChart("chartcontainer")'>柱状图</a> </div> <div class='ui-block-c'> <a data-role='button' data-theme='b' onclick='drawLineChart("chartcontainer")'>线性图</a> </div> </div> <div class='ui-grid-b'> <div class='ui-block-a'> <a data-role='button' data-theme='b' onclick='drawPieChart2("chartcontainer")'>饼图</a> </div> <div class='ui-block-b'> <a data-role='button' data-theme='b' onclick='drawBarChart2("chartcontainer")'>柱状图</a> </div> <div class='ui-block-c'> <a data-role='button' data-theme='b' onclick='drawLineChart2("chartcontainer")'>线性图</a> </div> </div> <div class='ui-grid-b'> <div class='ui-block-a'> <a data-role='button' data-theme='b' onclick='drawPieChart3("chartcontainer")'>饼图</a> </div> <div class='ui-block-b'> <a data-role='button' data-theme='b' onclick='drawBarChart3("chartcontainer")'>柱状图</a> </div> <div class='ui-block-c'> <a data-role='button' data-theme='b' onclick='drawLineChart3("chartcontainer")'>线性图</a> </div> </div> </div> <div data-role="footer" data-fullscreen="false" data-position="fixed" data-id="toolbar">
</div> </div> </body> </html> |
chart.js
function drawBarChart(containerid){
var chartContainer = $("#"+containerid); chartContainer.html(""); var html =""; if(window.screen.width > 400){ html += " <canvas id='mychart' style='background-color: transparent;' width='480' height='300'>"; }else{ html += " <canvas id='mychart' style='background-color: transparent;' width='320' height='300'>"; } html += "</canvas>"; chartContainer.html(html); chartContainer.trigger("create"); var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89]; var myGraph = new RGraph.Bar('mychart', data); myGraph.Set('chart.labels', ['11111月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月']) ; myGraph.Set('chart.gutter',25); myGraph.Set('chart.title',"RGRAPH CHART"); myGraph.Set('chart.text.angle', 30); myGraph.Set('chart.gutter.left', 60); RGraph.Effects.Bar.Grow(myGraph); }; function drawPieChart(containerid){
var chartContainer = $("#"+containerid); chartContainer.html(""); var html =""; if(window.screen.width > 400){ html += " <canvas id='mychart' style='background-color: transparent;' width='480' height='300'>"; }else{ html += " <canvas id='mychart' style='background-color: transparent;' width='320' height='300'>"; } html += "</canvas>"; chartContainer.html(html); chartContainer.trigger("create"); var pie = new RGraph.Pie('mychart', [9,5,12,8,4,9]); pie.Set('chart.strokestyle', '#e8e8e8'); pie.Set('chart.linewidth', 5); pie.Set('chart.shadow', true); pie.Set('chart.shadow.blur', 5); pie.Set('chart.shadow.offsety', 5); pie.Set('chart.shadow.offsetx', 5); pie.Set('chart.shadow.color', '#aaa'); pie.Set('chart.exploded', 2); pie.Set('chart.radius', 80); pie.Set('chart.title',"RGRAPH CHART"); pie.Set('chart.labels', ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget']); pie.Set('char.labels.ingraph',true); /*pie.Set('chart.labels.sticks', true); pie.Set('chart.labels.sticks.length', 5);*/ RGraph.Effects.Pie.RoundRobin(pie, {frames:6}); }; function drawLineChart(containerid){ var chartContainer = $("#"+containerid); chartContainer.html(""); var html =""; if(window.screen.width > 400){ html += " <canvas id='mychart' style='background-color: transparent;' width='480' height='300'>"; }else{ html += " <canvas id='mychart' style='background-color: transparent;' width='320' height='300'>"; } html += "</canvas>"; chartContainer.html(html); chartContainer.trigger("create"); var line = new RGraph.Line("mychart", [5,4,1,6,8,5,3]); line.Set('chart.labels', ['Mon','Tue','Wed','Thu','Fri','Sat','Sunday']); line.Set('chart.title',"RGRAPH CHART"); line.Set('chart.text.angle', 30); line.Set('chart.gutter.bottom', 60); RGraph.Effects.Line.jQuery.Trace(line); }; function drawPieChart2(containerid){
var myChart = new JSChart(containerid, 'pie', ''); myChart.setDataArray([['Sector 1', 2],['Sector 2', 1],['Sector 3', 3],['Sector 4', 6],['Sector 5', 9],['Sector 6', 10]]); myChart.colorize(['#A186BE','#8781BD','#8393CA','#7DA7D9','#94BCEB','#BD8CBF']); if(window.screen.width > 400){ myChart.setSize(480, 300); }else{ myChart.setSize(320, 300); } myChart.setPieRadius(105); myChart.setTitleColor('#413A7B'); myChart.setPieUnitsColor('#413A7B'); myChart.setPieUnitsFontSize(9); myChart.setPieValuesFontSize(9); myChart.draw(); }; function drawBarChart2(containerid){ var myChart = new JSChart(containerid, 'bar', ''); myChart.setDataArray([['Jun-04', 22.5],['Oct-04', 28],['Feb-05', 32],['Jun-05', 29],['Oct-05', 36],['Feb-06', 42],['Jun-06', 47],['Oct-06', 44],['Feb-07', 49]]); myChart.colorize(['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#ECC049','#EC9649','#D97431','#D95531']); if(window.screen.width > 400){ myChart.setSize(480,300); }else{ myChart.setSize(320, 300); } myChart.setBarValues(false); myChart.setBarSpacingRatio(45); myChart.setBarOpacity(1); myChart.setBarBorderWidth(0); myChart.setTitle('Home broadband penetration'); myChart.setTitleFontSize(10); myChart.setTitleColor('#607985'); myChart.setAxisValuesColor('#607985');
myChart.setGridOpacity(0.8); myChart.draw(); }; function drawLineChart2(containerid){ var myChart = new JSChart(containerid, 'line', ''); myChart.setDataArray([[1, 180],[2, 140],[3, 150],[4, 110],[5, 120],[6, 90],[7, 145],[8, 70],[9, 80],[10, 180],[11, 175]]); myChart.colorize(['#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9','#3E90C9']); if(window.screen.width > 400){ myChart.setSize(480,300); }else{ myChart.setSize(320, 300); } myChart.setIntervalEndY(200); myChart.setIntervalStartY(0); myChart.setAxisValuesNumberY(5); myChart.setTitle('Interactive line chart showing inverse of the normal cumulative distribution'); myChart.setTitleFontSize(10); myChart.setTitleColor('#424342'); myChart.setAxisValuesColor('#444444'); myChart.setShowXValues(false); myChart.setLabelX([1,'day1']); myChart.setLabelX([2,'day2']); myChart.setLabelX([3,'day3']); myChart.setLabelX([4,'day4']); myChart.setLabelX([5,'day5']); myChart.setLabelX([6,'day6']); myChart.setLabelX([7,'day7']); myChart.setLabelX([8,'day8']); myChart.setLabelX([9,'day9']); myChart.setLabelX([10,'day10']); myChart.setLabelX([11,'day11']); myChart.setLineColor('#D92323'); myChart.setTooltip([1,'180']); myChart.setTooltip([2,'140']); myChart.setTooltip([3,'150']); myChart.setTooltip([4,'110']); myChart.setTooltip([5,'120']); myChart.setTooltip([6,'90']); myChart.setTooltip([7,'145']); myChart.setTooltip([8,'80']); myChart.setTooltip([9,'80']); myChart.setTooltip([10,'180']); myChart.setTooltip([11,'175']); myChart.setFlagRadius(4); myChart.draw(); }; function drawPieChart3(containerid){ var chartContainer = $("#"+containerid); chartContainer.html(""); var mygrid= { drawGridLines: true, // wether to draw lines across the grid or not. gridLineColor: '#cccccc', // 设置整个图标区域网格背景线的颜色 background: 'rgba(0,0,0,0.0)', // 设置整个图表区域的背景色 borderColor: '#999999', // 设置图表的(最外侧)边框的颜色 borderWidth: 2.0, //设置图表的(最外侧)边框宽度 shadow: true, // 为整个图标(最外侧)边框设置阴影,以突出其立体效果 shadowAngle: 45, // 设置阴影区域的角度,从x轴顺时针方向旋转 shadowOffset:1.5, // 设置阴影区域偏移出图片边框的距离 shadowWidth: 3, // 设置阴影区域的宽度 shadowDepth: 3, // 设置影音区域重叠阴影的数量 shadowAlpha: 0.07, // 设置阴影区域的透明度 renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. rendererOptions: {} // options to pass to the renderer. Note, the default // CanvasGridRenderer takes no additional options. } ; var myoptions = { title: 'Chart', seriesDefaults: { shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, legend: { show:true }, grid:mygrid }; var mydata = [['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]; jQuery.jqplot.config.enablePlugins = true; jQuery.jqplot(containerid, [mydata], myoptions );
}; function drawBarChart3(containerid){ var chartContainer = $("#"+containerid); chartContainer.html(""); var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2], ['SonOfBitch', 4],['Bitch', 6],['Shit', 2], ['Aston Martin', 5],['Rolls Royce', 6]]; var mygrid= { drawGridLines: true, // wether to draw lines across the grid or not. gridLineColor: '#cccccc', // 设置整个图标区域网格背景线的颜色 background: 'rgba(0,0,0,0.0)', // 设置整个图表区域的背景色 borderColor: '#999999', // 设置图表的(最外侧)边框的颜色 borderWidth: 2.0, //设置图表的(最外侧)边框宽度 shadow: true, // 为整个图标(最外侧)边框设置阴影,以突出其立体效果 shadowAngle: 45, // 设置阴影区域的角度,从x轴顺时针方向旋转 shadowOffset:1.5, // 设置阴影区域偏移出图片边框的距离 shadowWidth: 3, // 设置阴影区域的宽度 shadowDepth: 3, // 设置影音区域重叠阴影的数量 shadowAlpha: 0.07, // 设置阴影区域的透明度 renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. rendererOptions: {} // options to pass to the renderer. Note, the default // CanvasGridRenderer takes no additional options. } ; var myoptions = { title:'Chart', // Provide a custom seriesColors array to override the default colors. seriesColors:['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'], seriesDefaults:{ renderer:jQuery.jqplot.BarRenderer, rendererOptions: { // Set varyBarColor to tru to use the custom colors on the bars. varyBarColor: true } }, axesDefaults: { tickRenderer: $.jqplot.CanvasAxisTickRenderer , tickOptions: { angle: -30, fontSize: '10pt' } }, axes:{ xaxis:{ renderer: jQuery.jqplot.CategoryAxisRenderer } }, grid:mygrid }; jQuery.jqplot.config.enablePlugins = true; jQuery.jqplot(containerid, [line1], myoptions); }; function drawLineChart3(containerid){ var chartContainer = $("#"+containerid); chartContainer.html(""); var mygrid= { drawGridLines: true, // wether to draw lines across the grid or not. gridLineColor: '#cccccc', // 设置整个图标区域网格背景线的颜色 background: 'rgba(0,0,0,0.0)', // 设置整个图表区域的背景色 borderColor: '#999999', // 设置图表的(最外侧)边框的颜色 borderWidth: 2.0, //设置图表的(最外侧)边框宽度 shadow: true, // 为整个图标(最外侧)边框设置阴影,以突出其立体效果 shadowAngle: 45, // 设置阴影区域的角度,从x轴顺时针方向旋转 shadowOffset:1.5, // 设置阴影区域偏移出图片边框的距离 shadowWidth: 3, // 设置阴影区域的宽度 shadowDepth: 3, // 设置影音区域重叠阴影的数量 shadowAlpha: 0.07, // 设置阴影区域的透明度 renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. rendererOptions: {} // options to pass to the renderer. Note, the default // CanvasGridRenderer takes no additional options. } ; var myoptions = { // Give the plot a title. title: 'Plot With Options', axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, seriesDefaults: { rendererOptions: {smooth: true} }, axes: { // options for each axis are specified in seperate option objects. xaxis: {label: "X Axis",pad: 0}, yaxis: {label: "Y Axis"} },//end axes grid:mygrid } var plot2 = $.jqplot (containerid, [[3,7,9,1,5,3,8,2,5]], myoptions); } |