The Eval function can parse some process code to achieve a state that can be executed, check a lot of posts, Jqchart Plug-ins to do line chart, processing returned data are all eval, but I can not get out, later found:
1, do not need eval processing, the direct interception of the string can be (the return value to stitching good);
2, the processing of the string into the series of data to add [];
Here's the code:
HTML page <body> tag inside only put a <div id= "Jqchart" style= "width:500px;" height:300px; " ></div>;
<script> inside
<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); The main is the processing of the return data, followed by a significantly more ","
//var dom = eval (' + dom + '));
Alert (DOM);
$ (' #jqChart '). Jqchart ({
title: {text: ' Linear diagram example '},
axes: [
{
location: ' Left ',
minimum:1,
maximum:10,
interval:1,
}
],
series: [
{
type: ' line ',
title: ' Shanghai ', The
markers:null,//inflection point is not marked
with dots strokestyle: ' Blue ',
data: [[' JSON ', 1], [' per ', 9], [' Perter ', 3]]
},< c27/>{
type: ' line ',//line,column
title: ' Beijing ',
strokestyle: ' Red ',
Data:[dom]
},
});
});
});
</script>
Background processing page I used simple PHP to get it, and nothing else would
<?php
include ("configaz.php");//The database is connected in another file, there is no
$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. "],";//stitching string, according to Jqchart Required string format, of course, with arrays better, unfortunately not how
There's got to be a better way, but I'm just starting to learn, slowly groping.
Believe that the solution is more than mentioned above, there must be a better solution, welcome everyone to learn and progress together.
Ps:ajax read the data and use Jqchart to display the chart
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"});
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! Complete example I'll put it in my resources.
I haven't used jquery Ajax for a long time, and it's a bit rusty to spell out JSON data. Still like to develop this kind of logical work ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
