我对 javascript (jquery/json) 很陌生，我编写了这段代码来渲染 CanvasJS 图表，并附带 php/json 数据获取脚本。
但是，当我在其中实现代码时，图表不会显示。当我在网络浏览器中使用 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>
最佳答案
看起来 jQuery 是在 canvasJS 之后加载的。如果 Canvasjs 需要使用 jQuery，则需要先加载 jQuery。尝试切换这些行，以便 jQuery 加载到顶部，它可能会修复您的错误。
编辑:实际上，托管 jQuery 的 CDN 似乎没有使用 $ 作为主 jQuery 对象的名称。如果将 $ 更改为“jQuery”，该错误应该得到解决。例如:
$(document).ready
会变成:
jQuery(document).ready
与 $.getJson 相同
关于javascript - 浏览器显示: Can't Find Variable: $?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30742628/