Question

我是javascript（jquery / json）的新手我已经编写了这段代码来渲染CanvasJS的图表以及php / json数据获取脚本。

然而，当我将代码实现到它时，图表不会显示。当我在Web浏览器中使用Console.log()查找ReferenceError时，它会显示：Can't find variable: $ ...Chart.html:11

我尝试了很多东西，并且我已经阅读了许多[重复]问题/答案，说我没有加载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（）{

和我的用于获取JSON数据的php： 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);

    ?>

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

修改-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>

编辑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

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

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

$(document).ready

会变成：

jQuery(document).ready

与$ .getJson相同

Answer 2

看起来Jquery没有正确加载，而且我认为这是因为你非常规地将外部脚本直接包含在元素之后。尝试将它们移到你自己的脚本之前，在头脑中。

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

Answer 3

已解决此问题

首先包括这一行：

比包括这一行：代码下面，而不是它上面。

转到我的data.php并注释（或删除）这一行：// $ json = str_replace（“\”“，”“，$ json）; //将所有”“替换为

你问为什么？好吧，因为CanvasJS需要字符串而不是单独的字符/整数。

这样输出将是：

[{ “×”： “1”， “Y”： “5”}，{ “×”： “2”， “Y”： “5”}，{ “×”： “3”，” Y “：” 4 “}，{” × “：” 4" ， “Y”： “1”}，{ “×”： “5”， “Y”： “8”}，{ “×”：” 6" ， “Y”： “9”}，{ “×”： “7”， “Y”： “5”}，{ “×”： “8”， “Y”： “6”}，{” X “：” 9" ， “Y”： “4”}，{ “×”： “10”， “Y”： “7”}，{ “×”： “14”， “Y”： “7” }，{ “×”： “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} ...等

浏览器指示：无法查找变量：$？

3 个答案: