在圖中使用ajax響應值

我試圖從數據庫中獲取數據，以顯示在graph.js圖中。據我所知，從Ajax的回調是異步的，我試圖設置一個超時，等待響應並將返回的值設置爲全局變量，但沒有任何工作。希望如果有人能告訴我這將如何工作！由於在圖中使用ajax響應值

<body> 

<canvas id="myChart"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
<script> 
    var ctx = document.getElementById('myChart').getContext('2d'); 
    var response = null; 

    var xhr; 
    if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
     xhr = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { // IE 8 and older 
     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xhr.open("POST", "fetch-graph.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    xhr.send("fetch"); 
    xhr.onreadystatechange = display_data; 
    function display_data() { 
     if (xhr.readyState == 4) { 
      if (xhr.status == 200) { 
       console.log(xhr.responseText); 
       response = xhr.responseText; 
      } else { 
       alert("something went wrong"); 
      } 
     } 
    } 

    var timerId = setInterval(function() { 
     if(response !== null) { 
      var chart = new Chart(ctx, { 
       // The type of chart we want to create 
       type: 'line', 

       // The data for our dataset 
       data: { 
        labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
        datasets: [{ 
         label: "Example Graph 1", 
         borderColor: 'rgb(255, 0, 100)', 
         //data: [45,23,39,12,34,56,67,78,90,78,73,74] 
         data: response 
        }] 
       } 
      }); 
      clearInterval(timerId); 
     } 
    }, 1000); 

</script> 
</body>

這是php文件，從數據庫獲取值：

所有的

<?php 

$connect = mysqli_connect("localhost", "max", "password", "graph"); 

if(isset($_POST['fetch'])){ 

    $sql = "SELECT * FROM graph_data"; 
    $query = mysqli_query($connect, $sql); 

    $row = mysqli_fetch_assoc($query); 

    $months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'deb']; 

    for ($i = 0; $i<12; $i++){ 
     echo $row[$months[$i]]; 
    } 
}

來源

2017-08-03 max.dng

相反的呼應純文本，也許你應該回應一個編碼的JSON？ – Terry

試圖在php中使用json_encode和在JS中使用JSON.parse，但沒有工作 –

首先，最好儘快創建圖形作爲響應是存在的。此外，圖表需要一個數組，因此您必須將來自php的響應編碼爲JSON。

<body> 

<canvas id="myChart"></canvas> 

<script> 
    var ctx = document.getElementById('myChart').getContext('2d'); 
    var response = null; 

    var xhr; 
    if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
     xhr = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { // IE 8 and older 
     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xhr.open("POST", "fetch-graph.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    xhr.send("fetch"); 
    xhr.onreadystatechange = display_data; 
    function display_data() { 
     if (xhr.readyState == 4) { 
      if (xhr.status == 200) { 
       console.log(xhr.responseText); 
       response = xhr.responseText; 
       try{ 
        var data = JSON.parse(response) 
       }catch(e){ 
        alert('Could not parse response from server') 
        return 
       } 
       createChart(data) 
      } else { 
       alert("something went wrong"); 
      } 
     } 
    } 

    function createChart(chart_data){ 
     var chart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
       datasets: [{ 
        label: "Example Graph 1", 
        borderColor: 'rgb(255, 0, 100)', 
        data: chart_data 
       }] 
      } 
     }); 
    } 

</script> 
</body>

而在服務器端：

$connect = mysqli_connect("localhost", "max", "password", "graph"); 

$response = array(); 

if(isset($_POST['fetch'])){ 

    $sql = "SELECT * FROM graph_data"; 
    $query = mysqli_query($connect, $sql); 

    $row = mysqli_fetch_assoc($query); 

    $months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'deb']; 

    for ($i = 0; $i<12; $i++){ 
     $response[] = $row[$months[$i]]; 
    } 
} 

echo json_encode($response);

來源

2017-08-03 08:34:17

Works！非常感謝你，會upvote，但沒有代表呢.. –

在圖中使用ajax響應值

回答

相關問題