This example describes how Ajax uses Jqchart to display charts after reading data. Share to everyone for your reference. The specific analysis is as follows:
Recent projects need to display a chart effect, the original collection of the chart plug-in finally useful.
But compared with Jqchart, there are a lot of differences.
Implementation effect:
I have rewritten the jqchart.
The first thing to solve is to not show the X and y axes:
Div
to//Cancel caption Display/
*
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);
//
Cancel Y-axis digital display
/* this.scaleybox//y Axis スケール
=this.mkboxelement (' y ',
this.op.scaleYLeft, This.op.scaleYTop
). Appendto (This.jqcanvasbox). Get (0);
//Cancel X-axis category display
/* this.scalexbox//x Axis スケール
=this.mkboxelement (' x ',
this.op.scaleXLeft, This.op.scaleXTop
). Appendto (This.jqcanvasbox). Get (0);
*/
Secondly, for the inflection point of the text, the original display is the corresponding data value, now need to display the corresponding X axis name:
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 '); Coordinate point x axis offset
var dyy = i%2? (dy+op.labeldataoffsety-25 + ' px '):(dy+op.labeldataoffsety-5 + ' px '); Coordinate point y-axis offset
it.wrttext (
//dx+op.labeldataoffsetx-20 + ' px ',
dxx,
//dy+op.labeldataoffsety-10 + ' px '),
dyy,
//op.rows[i], //PRE: Coordinate point data value
op.txtpointers[i],//cychai: Coordinate point text
op,
"# Jqchart-data-d-"+op.id"
. CSS (' Color ', (op.data.length==1)? #333 ': Strokestyle)
. css ({"width": "100px", "font-size": "12px"});//Cychai: Style control
Use the default data to display it. The next step is to collaborate with development.
I want to use Ajax to get the data asynchronously and then display it in the foreground.
Here, I use a sample page chartdata.html, which is the required data page
[{labelX: ["Design", "portability", "ease of Use", "Battery standby", "Camera function", "Zoom"],data: [[[5,7,2,3,9,4]]}]
At the front desk, I request the page via AJAX to 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:d d_chart.labelx,
//labelx: [ "Design", "portability", "ease of Use", "Battery standby", "Camera function", "Zoom"],
ScaleY: {min:0,max:10,gap:2},
width:300+25,
height:125+ Paddingl:10,
paddingt:10
},
//data: [[5,3,1,8,4,9]]
data:d d_chart.data
};
$ (' #canvasMyID '). Jqchart (chartsetting);
}
);
Full HTML page:
OK, that's it!
I hope this article will help you with your jquery programming.