The eval function can parse some processed program code to reach a state that can be executed. I checked many posts. When the jqchart plug-in makes a line chart, all the returned data are eval when processing it, but I can't figure it out. Later I found out:
1. There is no need for eval processing at all, just intercept the string directly (the return value must be spliced);
2. When the processed string is put into the data of the series, [];
Here is the code:
Only one
;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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);
$( '#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' ,
title: '北京' ,
strokeStyle: 'red' ,
data:[dom]
},
]
});
});
});
</script>
|
Copy after login
I used simple php to create the background processing page, and I don’t know how to do anything else
1 2 3 4 5 6 7 8 9 10 | <?php
include ( "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 . "]," ;
|
Copy after login
There must be a better way, but I just started learning and slowly exploring it
I believe there are more solutions than the above. There must be better solutions. We welcome everyone to learn and make progress together.
ps: ajax reads data and uses jqchart to display charts
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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' );
var dyy = i%2 ? (dy+op.labelDataOffsetY - 25 + 'px' ):(dy+op.labelDataOffsetY - 5 + 'px' );
it.wrtText(
dxx,
dyy,
op.txtpointers[i],
op,
"#jQchart-data-D-" +op.id
).css( 'color' ,(op.data.length==1)? '#333' :strokeStyle)
.css({ "width" : "100px" , "font-size" : "12px" });
|
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $( 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,
scaleY : {min: 0,max:10,gap:2},
width: 300+25,
height: 125+50,
paddingL : 10,
paddingT : 10
},
data :dd_chart.data
};
$( '#canvasMyID' ).jQchart(chartSetting);
}
});
|
Copy after login
Full html page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!--[ 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>
<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,
scaleY : {min: 0,max:10,gap:2},
width: 300+25,
height: 125+50,
paddingL : 10,
paddingT : 10
},
data :dd_chart.data
};
$( '#canvasMyID' ).jQchart(chartSetting);
}
});
|
Copy after login
OK, you’re done! I will put the complete example in my resources.
I haven’t used jquery ajax for a long time, and I’m a bit unfamiliar with spelling out json data. I still like to develop this kind of logical work....