How to use jqchart to display charts after ajax reads data

How to use jqchart to display charts after ajax reads data_javascript skills

WBOY

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

Original

1426 people have browsed it

The example in this article describes how to use jqchart to display charts after reading data with ajax. Share it with everyone for your reference. The specific analysis is as follows:

In recent projects, chart effects need to be displayed, and the chart plug-ins collected have finally come into use.

But compared with jqchart, there are still many differences.

Realization effect:

I rewrote jqchart.

The first thing to solve is not displaying the x-axis and y-axis:

//各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); 
*/

Copy after login

Secondly, for the text at the inflection point, the original display was the corresponding data value, but now the corresponding x-axis name needs to be displayed:

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:样式控制

Copy after login

The default data can be displayed. The next step is to collaborate with development.

I hope to use ajax to asynchronously obtain data and then display it in the foreground.

Here, I used a sample page chartdata.html, which is the required data page

[{labelX : ["Design","Portability","Easy to use","Battery standby","Camera function","Zoom"],data:[[5,7,2,3 ,9,4]]}]

In the foreground, I request the page through ajax, process the returned json data, and pass it to 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); 
 } 
});

Copy after login

Full html page:

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

Copy after login

OK, you’re done!

I hope this article will be helpful to everyone’s jQuery programming.