圖表未從 JSON 數據顯示

Question

更新：我打算使用ChartJS使用Microsoft SQL Server database數據在網頁上顯示圖表。 我已經將數據以JSON format輸出到頁面上，但是我無法將JSON數據傳輸到我的圖表上。 嘗試這樣做時，圖表根本不顯示，而是返回一個空白的白頁。

我嘗試通過直接向其添加數據來創建圖形，該圖形可以工作並顯示帶有數據的圖形。 我面臨的問題是嘗試使用來自 JSON 的數據加載圖形時，它根本不顯示圖形。 JSON 數據也不會顯示在我的瀏覽器控制台中。 然而，JSON 數據確實在將 data.php 文件加載到網頁上時顯示（用於測試）。 請參閱下面的屏幕截圖：

https://imgur.com/iKzc715

我剛剛刪除了以下代碼行

else { // if connected successfully
echo "Connected successfully";
}

正在添加到 JSON 中。 刪除該行后，我現在在嘗試加載圖形時在瀏覽器控制台中出現錯誤。 在此處查看屏幕截圖：

https://imgur.com/P3ElaCJ

我已經將 JQuery 腳本替換為最新版本，但是同樣的問題。 請問有什么建議嗎？

下面是data.php

<?php
  header('Content-Type: application/json');
  $serverName = "******"; 
  $connectionInfo = array(
    "Database" => "****", // database name
    "UID" => "****", // username
    "PWD" => "****"  // password
  );

  $conn = sqlsrv_connect($serverName, $connectionInfo);


  //if not connected successfully
  if (!$conn)  {
    die("Connection error: " . mysqli_connect_error());
  } else { // if connected successfully
    echo "Connected successfully";
  }


  $sql = "SELECT Name, TestID FROM Testtable"; //create select statement
  $result = sqlsrv_query($conn, $sql); // execute select query from database
  $data = array(); 

  while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    $data[] = $row; //add results to data array
  }

  sqlsrv_free_stmt($result); //free result entry
  sqlsrv_close($conn); // close connection
  echo json_encode($data); //encode data to JSON
?>

下面是 app.js

$(document).ready(function(){
   $.ajax({
     url: "http://localhost/chartjs/data.php",
     method: "GET",
     success: function(data) {
        data = JSON.parse(data);
        console.log(data);
        var name = [];
        var testid = [];

        for(var i in data) {
           name.push("Name " + data[i].Name);
           testid.push(data[i].TestID);
           console.log(data);
        }

        var chartdata = {
          labels: name,
          datasets : [{
             label: 'Name and TestIDs',
             backgroundColor: 'rgba(200, 200, 200, 0.75)',
             borderColor: 'rgba(200, 200, 200, 0.75)',
             hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
             hoverBorderColor: 'rgba(200, 200, 200, 1)',
             data: testid
          }]
        };

        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
           type: 'bar',
           data: chartdata
        });
     },
     error: function(data) {
        console.log(data);
     }
  });
});

我需要將 JSON 數據輸出到我的圖表並顯示圖表。

目前，圖表未顯示。

JSON 數據也沒有輸出到我的瀏覽器控制台。

Answer 1

通過從app.php中刪除以下代碼行解決了該問題：

data = JSON.parse(data);

Answer 2

你獲取圖表的方法是錯誤的，你只得到html元素，但你需要得到上下文，你可以這樣做：

$("#mycanvas").get(0).getContext('2d');

要么

document.getElementById('mycanvas').getContext('2d');

Answer 3

替換所有單詞： sqlsrv_**到mysqli_**因為你在這里使用了mysqli標簽die("Connection error: " . mysqli_connect_error()); 但沒有其他地方？