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>

0

Решение

Похоже, что jQuery загружается после canvasJS. Если Canvasjs должен использовать jQuery, сначала ему нужно загрузить jQuery. Попробуйте переключить эти строки так, чтобы jQuery загружался сверху, и это, вероятно, исправит вашу ошибку.

РЕДАКТИРОВАТЬ: На самом деле кажется, что CDN, в котором находится ваш jQuery, не использует $ в качестве имени вашего основного объекта jQuery. Если вы измените $ на «jQuery», эта ошибка должна быть устранена. Например:

$(document).ready

станет:

jQuery(document).ready

то же самое с $ .getJson

2

Другие решения

Похоже, что Jquery не загружается должным образом, и я думаю, это из-за вашей нетрадиционной практики включения внешних скриптов непосредственно после элемента. Попробуйте переместить их вниз, прямо перед вашим собственным сценарием, внутри головы.

Изменить: сообщение было обновлено, и, видимо, это не помогло.

0

Решено

Сначала включите эту строку:

чем включить эту строку: НИЖЕ код, а не над ним.

Затем перейдите к моему 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} … и т.д..

0
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector