Verwenden Sie EVAL, um jqchart jquery Liniendiagramm-Rückgabedaten zu verarbeiten, ungültige Lösung_jquery

Die Auswertungsfunktion kann einen Teil des verarbeiteten Programmcodes analysieren, um einen ausführbaren Zustand zu erreichen. Wenn das jqchart-Plugin ein Liniendiagramm erstellt, werden alle zurückgegebenen Daten bei der Verarbeitung ausgewertet, aber ich kann Ich finde es nicht heraus. Später habe ich herausgefunden:

1. Es ist überhaupt keine Auswertungsverarbeitung erforderlich. Fangen Sie einfach die Zeichenfolge direkt ab (der Rückgabewert muss gespleißt werden). 2. Wenn die verarbeitete Zeichenfolge in die Daten der Serie eingefügt wird, [

Hier ist der Code:

Nur ​​ein

;

<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);//主要是对返回数据的处理，后面很明显多了一个","
  //var dom = eval('(' + dom + ')'); 
  //alert( dom);
 $('#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',//line,Column
    title:'北京',
    strokeStyle: 'red' , 
    data:[dom]
   },
   ]
  }); 
});
});
</script>

Ich habe einfaches PHP verwendet, um die Hintergrundverarbeitungsseite zu erstellen, und ich weiß nicht, wie ich sonst etwas machen soll

<&#63;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."],";//拼接字符串，按照jqChart要求的字符串格式，当然用数组更好，可惜不怎么会

Es muss einen besseren Weg geben, aber ich habe gerade erst angefangen, ihn zu lernen und langsam zu erforschen

Ich glaube, dass es mehr Lösungen als die oben genannten gibt. Es muss bessere Lösungen geben. Wir heißen alle willkommen, gemeinsam zu lernen und Fortschritte zu machen.

ps: Ajax liest Daten und verwendet jqchart, um Diagramme anzuzeigen

In jüngsten Projekten müssen Diagrammeffekte angezeigt werden, und die gesammelten Diagramm-Plug-Ins wurden endlich verwendet.

Aber im Vergleich zu jqchart gibt es immer noch viele Unterschiede.

Realisierungseffekt:

Ich habe jqchart umgeschrieben.

Die erste Lösung besteht darin, dass die x-Achse und die y-Achse nicht angezeigt werden:

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

Zweitens wurde für den Text am Wendepunkt ursprünglich der entsprechende Datenwert angezeigt, jetzt muss jedoch der entsprechende X-Achsenname angezeigt werden:

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

Die Standarddaten können angezeigt werden. Der nächste Schritt ist die Zusammenarbeit mit der Entwicklung.

Ich hoffe, Ajax verwenden zu können, um Daten asynchron abzurufen und sie dann im Vordergrund anzuzeigen.

Hier habe ich eine Beispielseite chartdata.html verwendet, die die erforderliche Datenseite ist

[{labelX : ["Design", "Portabilität", "Einfach zu bedienen", "Batterie-Standby", "Kamerafunktion", "Zoom"], Daten: [[5,7,2,3 ,9 ,4]]}]

Im Vordergrund fordere ich die Seite über Ajax an, verarbeite die zurückgegebenen JSON-Daten und übergebe sie an 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); 
 } 
}); 

Vollständige HTML-Seite:

Okay, du bist fertig! Ich werde das vollständige Beispiel in meine Ressourcen aufnehmen.

Ich habe Jquery Ajax schon lange nicht mehr verwendet und bin mit der Schreibweise von JSON-Daten etwas ungewohnt. Ich entwickle immer noch gerne diese Art logischer Arbeit....