浏览器显示：找不到变量：$?

Question

我是 javascript 的新手 (jquery/json) 我编写了这段代码来渲染 CanvasJS 的图表，并附带 php/json 数据获取脚本.

但是，当我在其中执行代码时，图表不会显示。当我在网络浏览器中使用 Console.log() 查找 ReferenceError 时，它说：Can't find variable: $ ...Chart.html:11

我已经尝试了很多东西，而且我已经阅读了很多 [重复] question/answers 说我没有加载 Jquery 库和一堆其他选项。我试过实施这一行：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>

而且我尝试了很多变量，但我不明白我可以在这两个代码中使用更多的东西..

任何指向正确方向的点都会很棒。

Chart.html

<!DOCTYPE HTML>
<html>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>


<head>
    <script type="text/javascript">

                $(document).ready(function () {

                $.getJSON("data.php", function (result) {

                var dataPoints = [];

                for (var i = 0; i <= result.length - 1; i++) {
                dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
                }

                var chart = new CanvasJS.Chart("chartContainer", {
                data: [
                {
                dataPoints: dataPoints
                }
                ]
                });

                chart.render();
                });
        });


</script>

</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

在上面的代码中，涉及这部分：

$(document).ready(function () {

和我的 php 用于 JSON 数据获取：data.php

 <?php
    //header('Content-Type: application/json');

    $con = mysqli_connect("localhost","root","","WebApplication");

    // Check connection
    if (mysqli_connect_errno($con))
    {
        echo "Failed to connect to DataBase: " . mysqli_connect_error();
    } 
    else
    {
    $data_points = array();

    $result = mysqli_query($con, "SELECT * FROM info");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("x" => $row['id'] , "y" => $row['acceleration']);

        array_push($data_points, $point);        
    }

        $json =  json_encode($data_points, 32); //define('JSON_NUMERIC_CHECK',32);   // Since PHP 5.3.3
        $json = str_replace("\"", "", $json); //replace all the "" with nothing
         echo $json;

    }
    mysqli_close($con);

    ?>

我知道堆栈溢出社区总是需要更多信息，但看在上帝的份上，我不知道了，我真的很想学习这个。

EDIT-1:

这是我知道的，还没有结果。

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript" src="canvasjs.min.js"></script>
    <script type="text/javascript">

                $(document).ready(function () {

                $.getJSON("data.php", function (result) {

                var dataPoints = [];

                for (var i = 0; i <= result.length - 1; i++) {
                dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
                }

                var chart = new CanvasJS.Chart("chartContainer", {
                data: [
                {
                dataPoints: dataPoints
                }
                ]
                });

                chart.render();
                });
        });


</script>

</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

EDIT-2：默认代码，有效：

这是默认代码，它不使用我的 data.php 代码，而是使用随机数据点作为数据源。它来自 Canvasjs，效果很好。

<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript">
    window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer",{
            title :{
                text: "Patient #01"
            },          
            data: [{
                type: "line",
                dataPoints: dps 
            }]
        });

        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 20;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {   
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };
            if (dps.length > dataLength)
            {
                dps.shift();                
            }

            chart.render();     

        };

        // generates first set of dataPoints
        updateChart(dataLength); 

        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 

    }

</script>



<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:600px;">
    </div>
</body>
</html>

Answer 1

看起来 jQuery 是在 canvasJS 之后加载的。如果 Canvasjs 需要使用 jQuery，则需要先加载 jQuery。尝试切换这些行，以便将 jQuery 加载到顶部，它可能会修复您的错误。

编辑： 实际上，托管您的 jQuery 的 CDN 似乎没有使用 $ 作为您的主要 jQuery 对象的名称。如果将 $ 更改为 "jQuery" ，则应该解决该错误。例如：

$(document).ready

会变成：

jQuery(document).ready

同$.getJson

Answer 2

看起来 Jquery 没有正确加载，我认为这是因为您在元素之后直接包含外部脚本的非常规做法。尝试将它们向下移动到您自己的脚本之前，在头部。

编辑：post 已更新，显然这没有帮助。

Answer 3

SOLVED IT

首先包括这一行：

而不是包含此行：在代码下方，而不是在其上方。

然后转到我的 data.php 并评论（或删除）此行：//$json = str_replace("\"", "", $json); //将所有的""替换为空

你为什么问？好吧，因为 CanvasJS 需要字符串而不是单独的 characters/integrers.

所以输出将是：

[{"x":"1","y":"5"},{"x":"2","y":"5"},{"x":"3","y":"4"},{"x":"4","y":"1"},{"x":"5","y":"8"},{"x":"6","y":"9"},{"x":"7","y":"5"},{"x":"8","y":"6"},{"x":"9","y":"4"},{"x":"10","y":"7"},{"x":"14","y":"7"},{"x":"15","y":"7"}]

而不是：

[{x:1,y:5},{x:2,y:5},{x:3,y:4},{x:4,y:1},{x:5,y:8},{x:6,y:9}...etc.

浏览器显示：找不到变量：$?

Browser indicates: Can't Find Variable: $?

javascript

php

jquery

json

canvasjs