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());标签，但没有其他地方吗？

图表未从JSON数据显示

3 个答案: