同一页面上带有 JSON 数据的 chart.js 未显示

Question

我在使用 chart.js 渲染图表时遇到了一个小问题，从 MySQL 数据库中提取数据。 当我使用外部文件来提取数据时，它可以工作，但是我试图在一个文件上编写整个代码，但这给我带来了一些麻烦我假设json_encode数据没有正确提供代码如下所列：

<!DOCTYPE html>
<html>
<head>
<title>Demo Charts</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>
<body>
    <div>
<?php
$conn = mysqli_connect("localhost","root","password","db1");

$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
mysqli_close($conn);
$json = json_encode($data);
?>
        <div>
            <span><h3>Pie Chart</h3></span>
            <canvas id="pieCanvas"></canvas>
        </div>
        <script type="text/javascript"> 
        $(document).ready(function () {
            showGraph2();
        });

        function showGraph2()
        {
            {
                var data = <?php echo $json; ?>;
               // $.post("api/data.php", `==>>THIS WORKS`
             $.post(data,
                function(data)
                {
                    console.log(data);
                     var name = [];
                    var marks = [];
                    var coloR = [];

                     var dynamicColors = function() {
                    var r = Math.floor(Math.random() * 255);
                    var g = Math.floor(Math.random() * 255);
                    var b = Math.floor(Math.random() * 255);
                    return "rgb(" + r + "," + g + "," + b + ")";
                 };


                    for (var i in data) {
                        name.push(data[i].student_name);
                        marks.push(data[i].marks);
                         coloR.push(dynamicColors());
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                //borderColor: '#46d5f1',
                                backgroundColor: coloR,
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#pieCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'pie',
                        data: chartdata
                    });
                });
            }
        } 
         showGraph2();


</script>

    </div> 

</body>
</html>

Answer 1

这是相关的 JavaScript 部分：

const useAJAX = false;

$(document).ready(function () {
  if (useAJAX) $.getJSON('api/data.php').then(showGraph);
  else showGraph(<?= $json ?>);
});

function showGraph(data) {
  console.log(data);
  var name = [];
  var marks = [];
  var coloR = [];
  // etc, etc
}

我已经完全分开了 a) 获取数据和 b) 处理数据。 这样你就可以很好地在两者之间切换。

我已经像你一样直接将 JSON 插入到脚本中。 不是超级干净或良好的实践，但现在可以正常工作。

我稍微重写了 AJAX 部分，我使用$.getJSON代替，假设文件不需要任何 POST 参数。 我使用了.then() ，利用了 jQuery AJAX 方法返回Promises的事实。

最后提示：不要像那样混合 PHP 和 HTML/JS。 将所有 PHP 内容移至最顶部，在第一个回显/纯文本之前设置所有变量。 然后使用?><!DOCTYPE html>移动到 HTML。