ChartsNew.js php json集成

我用谷歌搜索和檢查在論壇上的答案，但我找不到一個。ChartsNew.js php json集成

我的問題是，我想結合使用ChartsNew.js與PHP和數據集應該可用js json上，但我得到一個未定義的數據集例外或圖表沒有抗衡。

我可以將php數組與我從github項目ChartsNew.js中的example中獲取的數據進行轉換。當我比較這兩個字符串時。它們幾乎相同，但關鍵詞在引號之下。我試圖將該字符串複製到html文件中，並且圖表工作正常。

但是，當我使用Javascript來解析字符串它告訴我數據集是未定義的或它顯示沒有競爭的圖表。

我做了我的變量對象和數據集，但它沒有解決問題。

我發現mydata1沒有數據，當我最終要訪問它時。我如何讓var解析工作正常？

的PHP代碼：

$data = array(
      'labels' => array("Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"), 
      'datasets' => array(
       array(
        'fillColor' => "blue", 
        'strokeColor' => "rgba(220,220,220,1)", 
        'pointColor' => "rgba(220,220,220,1)", 
        'pointStrokeColor' => "#fff", 
        'data' => array(100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000), 
        'title' => "previous Month" 
       ), 
       array(
        'fillColor' => "red", 
        'strokeColor' => "rgba(220,220,220,1)", 
        'pointColor' => "rgba(220,220,220,1)", 
        'pointStrokeColor' => "#fff", 
        'data' => array(100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000), 
        'title' => "current month" 
       ), 
       array(
        'type' => "Line", 
        //   fillColor : "rgba(0,0,0,0)", 
        'strokeColor' => "green", 
        'pointColor' => "green", 
        'pointStrokeColor' => "green", 
        'data' => array(200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000), 
        'title' => "total" 
       ) 
      ) 
     ); 

    header("Access-Control-Allow-Origin: *"); 
     header("Content-Type: application/json; charset=UTF-8"); 
     echo '[' . json_encode($data) . ']'; 
     //echo json_encode($data); 
     exit("");

...和輸出：

[{"fillColor":"blue","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[100,200,400,2000,4000,16000,20000,32000,45000,85000,95000,115000],"title":"previous Month"},{"fillColor":"red","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[100,200,1600,2000,12000,4000,12000,13000,40000,10000,20000,17000],"title":"current month"},{"type":"Line","strokeColor":"green","pointColor":"green","pointStrokeColor":"green","data":[200,400,2000,4000,16000,20000,32000,45000,85000,95000,115000,132000],"title":"total"}]

...和HTML代碼+原始數據集：

<!DOCTYPE html> 
<html> 
    <body> 

     <h1>Customers</h1> 
     <div id="id01"></div> 

     <script src='ChartNew.js-master/ChartNew.js'></script> 
     <script> 
      var original_data = { 
       labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
       datasets: [ 
        { 
         fillColor: "blue", 
         strokeColor: "rgba(220,220,220,1)", 
         pointColor: "rgba(220,220,220,1)", 
         pointStrokeColor: "#fff", 
         data: [100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000], 
         title: "previous Month" 
        }, 
        { 
         fillColor: "red", 
         strokeColor: "rgba(220,220,220,1)", 
         pointColor: "rgba(220,220,220,1)", 
         pointStrokeColor: "#fff", 
         data: [100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000], 
         title: "current month" 
        }, 
        { 
         type: "Line", 
         strokeColor: "green", 
         pointColor: "green", 
         pointStrokeColor: "green", 
         data: [200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000], 
         title: "total" 
        } 
       ] 
      } 

      var newopts = { 
       animation: true, 
       datasetFill: false, 
       canvasBorders: true, 
       canvasBordersWidth: 3, 
       canvasBordersColor: "black", 
       graphTitle: "Graph Title", 
       graphTitleFontFamily: "'Arial'", 
       graphTitleFontSize: 24, 
       graphTitleFontStyle: "bold", 
       graphTitleFontColor: "#666", 
       legend: true, 
       legendBlockSize: 30, 
       bezierCurveTension: 0.2, 
       legendPosX: 2, 
       legendPosY: 0, 
       graphMax: 160000, 
       yAxisMinimumInterval: 40000, 
       scaleXGridLinesStep: 9999 
      } 

     </script> 

     <div id="canvas_parent_id" > 
      <canvas id="canvas_stackedbar_id" width="500px" height="500px">Please enable Javascript to see the Chart</canvas> 
      <script> 

       var mydata1 = new Object(); 
       mydata1.datasets = new Object(); 
        try { 
         var xmlhttp = new XMLHttpRequest(); 
         var url = "http://localhost/file.php?json=123"; 

         xmlhttp.onreadystatechange = function() { 
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
           myFunction(xmlhttp.responseText); 
          } 
         } 
         xmlhttp.open("GET", url, true); 
         xmlhttp.send(); 

         function myFunction(response) { 
          var arr = JSON.parse(response); 
          arr = JSON.stringify(arr); 
          mydata1 = arr; 

         } 
        } catch (e) { 
         alert("Error: " + e); 
        } 
      </script> 
     </div> 
    </body> 
</html>

來源

2016-08-18 Remax

這個充滿代碼將與你的工作正常

HTML端：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src='http://fvancop.github.io/ChartNew.js/ChartNew.js'></script> 
     <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    </head> 
    <body> 
     <canvas id="canvas" height="600" width="1000"></canvas> 
     <script> 
      $.ajax({ 
       type: "POST", 
       url: "http://localhost/file.php?json=123", 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       dataType: "JSON", 
       success: function (response) 
       { 
        new Chart(document.getElementById("canvas").getContext("2d")).Line(response); 
       } 
      }); 

     </script> 

    </body> 
</html>

PHP端

$data = array(); 

$data['labels'] = array("Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); 
$data['datasets'] = array(
    array(
     'fillColor' => "blue", 
     'strokeColor' => "rgba(220,220,220,1)", 
     'pointColor' => "rgba(220,220,220,1)", 
     'pointStrokeColor' => "#fff", 
     'data' => array(100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000), 
     'title' => "previous Month" 
    ), 
    array(
     'fillColor' => "red", 
     'strokeColor' => "rgba(220,220,220,1)", 
     'pointColor' => "rgba(220,220,220,1)", 
     'pointStrokeColor' => "#fff", 
     'data' => array(100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000), 
     'title' => "current month" 
    ), 
    array(
     'type' => "Line", 
     //   fillColor : "rgba(0,0,0,0)", 
     'strokeColor' => "green", 
     'pointColor' => "green", 
     'pointStrokeColor' => "green", 
     'data' => array(200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000), 
     'title' => "total" 
    ) 
); 
header("Access-Control-Allow-Origin: *"); 
header("Content-Type: application/json; charset=UTF-8"); 
echo json_encode($data); 
//echo json_encode($data); 
exit("");

來源

2016-08-18 10:54:45 AnasSafi

我試了一下，什麼都沒有改變。 – Remax

我是編輯發佈到完整的代碼將與你工作正常 – AnasSafi

謝謝，它的工作 – Remax

ChartsNew.js php json集成

回答

相關問題