javascript - 不显示来自 JSON 数据的图表

Question

更新:我打算使用 ChartJS 使用来自 Microsoft SQL Server 数据库 的数据在网页上显示图表。我已经获得要以 JSON 格式 输出到页面上的数据，但是我无法将 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);