Cara menggunakan jqchart untuk memaparkan carta selepas ajax membaca kemahiran data

Cara menggunakan jqchart untuk memaparkan carta selepas ajax membaca kemahiran data_javascript

WBOY

Lepaskan： 2016-05-16 15:56:15

asal

1443 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menggunakan jqchart untuk memaparkan carta selepas membaca data dengan ajax. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Dalam projek baru-baru ini, kesan carta perlu dipaparkan dan pemalam carta yang dikumpul akhirnya mula digunakan.

Tetapi jika dibandingkan dengan jqchart, masih terdapat banyak perbezaan.

Kesan realisasi:

Saya menulis semula jqchart.

Perkara pertama yang perlu diselesaikan ialah tidak memaparkan paksi-x dan paksi-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); 
*/

Salin selepas log masuk

Kedua, untuk teks pada titik infleksi, paparan asal ialah nilai data yang sepadan, tetapi kini nama paksi-x yang sepadan perlu dipaparkan:

if( x <= op.width){ 
 var dx=x-op.paddingL,dy=y-op.paddingT; 
 var dxx = i<=0 &#63; (dx+op.labelDataOffsetX - 5 + 'px'):( dx+op.labelDataOffsetX - 20 + 'px'); //坐标点x轴偏移 
 var dyy = i%2 &#63; (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)&#63;'#333':strokeStyle) 
 .css({"width":"100px","font-size":"12px"}); // cychai:样式控制

Salin selepas log masuk

Data lalai boleh dipaparkan. Langkah seterusnya ialah bekerjasama dengan pembangunan.

Saya berharap dapat menggunakan ajax untuk mendapatkan data secara tidak segerak dan kemudian memaparkannya di latar depan.

Di sini, saya menggunakan contoh halaman chartdata.html, iaitu halaman data yang diperlukan

[{labelX : ["Reka Bentuk","Kemudahalih","Mudah digunakan","Siaga bateri","Fungsi kamera","Zum"],data:[[5,7,2,3 ,9 ,4]]}]

Di latar depan, saya meminta halaman melalui ajax, memproses data json yang dikembalikan, dan menghantarnya ke chartSetting:

$(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); 
 } 
});

Salin selepas log masuk

Halaman html penuh:

<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>

Salin selepas log masuk

OK, anda sudah selesai!

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.