图表不显示JSON数据

Question

更新：我想使用ChartJS使用来自Microsoft SQL Server database的数据在网页上显示图表。我已将数据输出到JSON format的页面上，但是我无法将JSON数据传输到我的图表上。尝试这样做时，图表根本不显示，但返回空白页面。

我尝试通过直接向其添加数据来创建图形，该图形可以工作并显示带有数据的图形。我面临的问题是当使用来自JSON的数据加载图表时，它根本不显示图形。 JSON数据也不会显示在我的浏览器控制台中。但是，在将data.php文件加载到网页上（用于测试）时，JSON数据会显示。请参见下面的截图：

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());但是没有其他地方？