易网时代-编程资源站
易网时代-编程资源站 <script>里面<script type="text/javascript" src="jquery.1.8.2.js"></script><script type="text/javascript" src="jquery-jqChart-min.js"></script><script type="text/javascript">$（function （） { $.get（"tgajax.php",function（data）{var dom = data.substring（0,data.length-1）;//主要是对返回数据的处理，后面很明显多了一个","//var dom = eval（"（" + dom + "）"）; //alert（ dom）; $（"#jqChart"）.jqChart（{title: { text: "线形图示例" },axes: [ {location: "left",minimum: 1,maximum: 10,interval: 1, }], series: [ {type: "line",title:"上海",markers: null,//拐点不用圆点标示 strokeStyle: "blue" , data: [["json", 1], ["per", 9], ["perter", 3]] }, {type: "line",//line,Columntitle:"北京",strokeStyle: "red" , data:[dom] }, ]}）; }）;}）;</script>后台处理页面我就用简单的php弄了，别的也不会<?phpinclude （"configaz.php"）; //数据库连接在另一个文件内，这里就不弄了 $sql="select sid,sname,sprice,count（sprice） as pricenum from shangpin group by sname"; $query=mysql_query（$sql）; $row=mysql_fetch_array（$query）; while（$row=mysql_fetch_array（$query））{ $pricenum=$row["pricenum"]; $sname=$row["sname"]; }echo $str .= "["".$sname."",".$pricenum."],";//拼接字符串，按照jqChart要求的字符串格式，当然用数组更好，可惜不怎么会肯定还有更好的方法 只是我刚开始学，慢慢摸索
我就对jqchart进行了重新编写。
首先要解决的是不显示x轴和y轴：
//各DIV作成// 取消标题显示/*this.titleBox//Title =this.mkBoxElement（"T",this.op.titleLeft,this.op.titleTop ）.appendTo（this.jQcanvasBox） .css（"width",this.op.width-this.op.titleLeft）//fix for safari3 2007.12.4 .get（0）;*/// 取消y轴数字显示/*this.scaleYBox//Y軸スケール =this.mkBoxElement（"Y",this.op.scaleYLeft,this.op.scaleYTop ）.appendTo（this.jQcanvasBox）.get（0）;*/// 取消x轴分类显示/*this.scaleXBox//X軸スケール =this.mkBoxElement（"X",this.op.scaleXLeft,this.op.scaleXTop）.appendTo（this.jQcanvasBox）.get（0）;*/其次，对于拐点的文字，原来显示是相应的data值，现在需要显示的是对应的x轴名称：
if（ x <= op.width）{var dx=x-op.paddingL,dy=y-op.paddingT;var dxx = i<=0 ? （dx+op.labelDataOffsetX - 5 + "px"）:（ dx+op.labelDataOffsetX - 20 + "px"）; //坐标点x轴偏移var dyy = i%2 ? （dy+op.labelDataOffsetY - 25 + "px"）:（dy+op.labelDataOffsetY - 5 + "px"）; //坐标点y轴偏移it.wrtText（ //dx+op.labelDataOffsetX - 20 + "px", dxx, //dy+op.labelDataOffsetY - 10 + "px", dyy, //op.rows[i],// pre: 坐标点data值 op.txtpointers[i], // cychai:坐标点文字 op, "#jQchart-data-D-"+op.id）.css（"color",（op.data.length==1）?"#333":strokeStyle）.css（{"width":"100px","font-size":"12px"}）;// cychai:样式控制 使用默认的数据可以显示出来了。接下来就是和开发的协作了。$（function（）{$.ajax（{ url: "chartdata.html", type: "GET", success: function（cdata）{showDDChart（cdata）; }}）;function showDDChart（cdata）{ var dd_chart = eval（cdata）[0]; var chartSetting={config : {title : "",titleLeft: 70,labelX :dd_chart.labelX,//labelX :["外观设计","便携性","易用性","电池待机","摄像功能","变焦"], scaleY : {min: 0,max:10,gap:2}, width: 300+25,height: 125+50,paddingL : 10,paddingT : 10 }, //data: [[5,3,1,8,4,9]]data :dd_chart.data };$（"#canvasMyID"）.jQchart（chartSetting）;} }）; 完整的html页面：<head> <！--[if IE]> <mce:script src="excanvas-compressed.js" mce_src="excanvas-compressed.js" type="text/javascript" ></mce:script> <！[endif]--> <mce:script src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" mce_src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" type="text/javascript"></mce:script> <mce:script src="jquery.jqchart.js" mce_src="jquery.jqchart.js" type="text/javascript" charset="utf-8"></mce:script> </head><body> <canvas id="canvasMyID" height="200"></canvas> <mce:script type="text/javascript"><！-- $（function（）{$.ajax（{ url: "chartdata.html", type: "GET", success: function（cdata）{showDDChart（cdata）; }}）;function showDDChart（cdata）{ var dd_chart = eval（cdata）[0]; var chartSetting={config : {title : "",titleLeft: 70,labelX :dd_chart.labelX,//labelX :["外观设计","便携性","易用性","电池待机","摄像功能","变焦"], scaleY : {min: 0,max:10,gap:2}, width: 300+25,height: 125+50,paddingL : 10,paddingT : 10 }, //data: [[5,3,1,8,4,9]]data :dd_chart.data };$（"#canvasMyID"）.jQchart（chartSetting）;} }）; // --></mce:script> </body> </html> OK，大功告成！ 完整示例我会放到我的资源里。