javascript - 图表未从 JSON 数据中显示

问题描述

更新：我正在尝试使用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 数据也没有输出到我的浏览器控制台。

标签： javascriptphpmysqljsonchart.js

javascript - 图表未从 JSON 数据中显示

问题描述

解决方案

推荐阅读