jquery 读取table 数据并通过jqchart展现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0033)http://wap.oschina.net/jqchart.vm --> <HTML> <HEAD> <TITLE>jQchart演示</TITLE> <!----> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <META content="MSHTML 6.00.3790.4555" name=GENERATOR> <SCRIPT src="js/jquery.js" mce_src="js/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="js/jqchart.js" mce_src="js/jqchart.js" type=text/javascript></SCRIPT> <!--[if IE]> <SCRIPT src="js/excanvas.js" mce_src="js/excanvas.js" type=text/javascript></SCRIPT> <![endif]--> <mce:script src="js/jqchartHelper.js" mce_src="js/jqchartHelper.js" type="text/javascript" language="javascript"></mce:script> </HEAD> <BODY> <mce:script type="text/javascript"><!-- $(document).ready(function(){ //--demo1 测试换进是否可用 var chartSetting={data : [ [435,500,600,700,888,777,925] ]}; $('#canvasMyID').jQchart(chartSetting); //--demo2 添加静态数据预览效果 var chartSetting1={ config : { title : "Fucking Java web XY线图", titleLeft: 70, labelX : ["X1","X2","X3","X4","X5","X6","X7"], scaleY : {min: 0,max:1000,gap:200}, width: 400, //有影响 height: 300, //有影响 paddingL : 50, //有影响 paddingT : 50 //有影响 }, data : [ [435,500,600,700,888,777,925], [50,123,312,200,402,300,512], [100,400,790,640,128,347,567] ] }; $('#canvasMyID1').jQchart(chartSetting1); //--demo3 动态获得数据并展现，到了这里，相信做过程序的人都因该知道该怎么办了。 var arr = "["; //$("#dataTable").each(function(){ $('table > tbody > tr').each(function(){ arr += "[" $(this).find('td').each(function(){arr += $(this).text() + ",";}); arr = arr.substr(0, arr.length-1); //减1取决于上面","，逗号后的空格。没有空格，所以去掉逗号是减1。 arr += "],"; }); arr = arr.substr(0, arr.length-1); //减1取决于上面","，逗号后的空格。没有空格，所以去掉逗号是减1。 arr += "]"; arr = eval(arr);//这里arr必须以对象的形式赋值给data属性，见下面。 var chartSetting2={ config : { title : "Fucking Java web XY线图", titleLeft: 70, labelX : ["X1","X2","X3","X4","X5","X6","X7"], scaleY : {min: 0,max:1000,gap:200}, width: 400, //有影响 height: 300, //有影响 paddingL : 50, //有影响 paddingT : 50 //有影响 }, data : arr//这里arr必须以对象的形式赋值给data属性，见上面。 }; $('#canvasMyID2').jQchart(chartSetting2); ////--demo4 动态获得数据，将数据传递给一个函数，生成图 // // // function jqchartHelper(X_data,Y_data) // { // var x = eval(X_data); // var y = eval(Y_data); // // var chartSetting3={ // config : { // title : "Fucking Java web XY线图", // titleLeft: 70, // labelX : y,//["X1","X2","X3","X4","X5","X6","X7"], // scaleY : {min: 0,max:1000,gap:200}, // width: 400, //有影响 // height: 300, //有影响 // paddingL : 50, //有影响 // paddingT : 50 //有影响 // }, // data : x//[[435,500,600,700,888,777,925],[100,400,790,640,128,347,567]] // }; // $('#canvasMyID3').jQchart(chartSetting3); // } //// var x = '[[100,400,790,640,128,347,567,400,790,640]]'; //// var y = '[10,20,30,40,50,60,70,80,90,100]'; //// //// jqchartHelper(x,y); //--demo5 一句js完成报表生成，参数：DOM元素id，X轴数据，Y轴数据 jqchartHelper('canvasMyID3','100,400,790,640,128,347,567,400,790,640','10,20,30,40,50,60,70,80,90,100'); //吴磊认为：1、这里要先创建 }); // --></mce:script> <canvas id="canvasMyID"></canvas> <canvas id="canvasMyID1"></canvas> <canvas id="canvasMyID2"></canvas> <canvas id="canvasMyID3"></canvas> <!--暂时假设这里的表是动态生成的 --> <br /> <br /> <br /> <table id="dataTable"> <tr><td>435</td><td>498</td><td>459</td><td>111</td><td>567</td><td>761</td><td style="width: 27px">534</td><td>185</td></tr> <tr><td>356</td><td>908</td><td>312</td><td>222</td><td>290</td><td>999</td><td style="width: 27px">123</td><td>491</td></tr> <tr><td>198</td><td>123</td><td>709</td><td>333</td><td>762</td><td>111</td><td style="width: 27px">459</td><td>917</td></tr> </table> </BODY> </HTML>