javascript — Браузер указывает: не могу найти переменную: $?
Я очень новичок в 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>
В приведенном выше коде это касается этой части:
$ (документ) .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>
РЕДАКТИРОВАТЬ-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 загружался сверху, и это, вероятно, исправит вашу ошибку.
РЕДАКТИРОВАТЬ: На самом деле кажется, что CDN, в котором находится ваш jQuery, не использует $ в качестве имени вашего основного объекта jQuery. Если вы измените $ на «jQuery», эта ошибка должна быть устранена. Например:
$(document).ready
станет:
jQuery(document).ready
то же самое с $ .getJson
Другие решения
Похоже, что Jquery не загружается должным образом, и я думаю, это из-за вашей нетрадиционной практики включения внешних скриптов непосредственно после элемента. Попробуйте переместить их вниз, прямо перед вашим собственным сценарием, внутри головы.
Изменить: сообщение было обновлено, и, видимо, это не помогло.
Решено
Сначала включите эту строку:
чем включить эту строку: НИЖЕ код, а не над ним.
Затем перейдите к моему data.php и закомментируйте (или удалите) эту строку: // $ json = str_replace («\» «,» «, $ json); // замените все» «на пустые
Почему ты спрашиваешь? Хорошо, потому что CanvasJS требует Strings, а не отдельные символы / целые числа.
Так что вывод будет:
[{ «Х»: «1», «у»: «5»}, { «х»: «2», «у»: «5»}, { «х»: «3», «у»: «4»}, { «х»: «4», «у»: «1»}, { «х»: «5», «у»: «8»}, { «х»: «6», «у»: «9»}, { «х»: «7», «у»: «5»}, { «х»: «8», «у»: «6»}, { «х»: «9», «у»: «4»}, { «х»: «10», «у»: «7»}, { «х»: «14», «у»: «7»}, { «х»: «15», «у»: «7»}]
Вместо:
[{Х: 1, у: 5}, {х: 2, у: 5}, {х: 3, у: 4}, {х: 4, у: 1}, {х: 5, у: 8} , {х: 6, у: 9} … и т.д..