0
我想創建一個從我的數據庫中的數據圖表製作線圖，但是當我嘗試畫它，我有一個JavaScript錯誤：圖表專家遺漏的類型錯誤：無法讀取屬性
chartist.min.js:8 Uncaught TypeError: Cannot read property
這裏是我的代碼，
HTML頁面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Graphique Vitesse</title>
<link rel="stylesheet" type="text/css" href="chartist.min.css"/>
<script src="jquery.js"></script>
<script src="chartist.min.js"></script>
<script type="text/javascript">
function test() {
var c=0;
var series = [];
for (var i = 80; i < 81; ++i) {
$.ajax({url: "test.php?id_cycliste="+i, success: function(result){
var i=0;
var ser = []
for (v of result){
alert("test1 " + v);
//alert("Salope"+v);
ser[i] = v.y;
++i;
alert(1);
}
alert(2)
series[c] = ser;
++c;
}});
//alert ("Tu va te prendre une calotte"+series.toString());
alert("test 2"+series.toString())
// $.ajax(("test.php?id_cycliste="+i), function (result) {
// var i=0;
// var ser = []
//
// for (v of result){
// alert("Salope"+v);
// ser[i] = v.y;
// ++i;
// alert(1);
// }
// alert(2)
// series[c] = ser;
// ++c;
// })
// alert ("Tu va te prendre une calotte"+series.toString());
}
var options = {
// Don't draw the line chart points
showPoint: false,
// Disable line smoothing
lineSmooth: false,
// X-Axis specific configuration
axisX: {
// We can disable the grid for this axis
showGrid: false,
// and also don't show the label
showLabel: false
},
// Y-Axis specific configuration
axisY: {
// Lets offset the chart a bit from the labels
offset: 60,
// The label interpolation function enables you to modify the values
// used for the labels on each axis. Here we are converting the
// values into million pound.
labelInterpolationFnc: function(value) {
return '$' + value + 'm';
}
}
};
// var data = {labels,series}
var data = {
// A labels array that can contain any sort of values
labels : [0,2,4,6,8,10,12,14,16],
// Our series array that contains series objects or in this case series data arrays
series
};
new Chartist.Line('.ct-chart', data, options);
}
test();
</script>
</head>
<body>
<h1> Bonjour </h1>
<div class="ct-chart ct-perfect-fourth"></div>
<div class="ct-chart"></div>
<div id="graphVitesse" style="height: 350px;"></div>
</body>
</html>
PHP頁面：
<?php
header('Content-Type: application/json');
$con = mysqli_connect("localhost","root","","veloinfospublic");
// Check connection
$id = $_GET["id_cycliste"];
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
$data_points = array();
$result = mysqli_query($con, "SELECT Temps,Vitesse FROM releve where cycliste_id=".$id);
// var_dump ($result);
// while($row = mysqli_fetch_array($result))
// {
// $point = array("label" => $row['temps'] , "y" => $row['vitesse']);
// var_dump ($point);
//
//
// }
while ($row = $result->fetch_assoc()) {
$point = array("label" => $row['Temps'] , "y" => $row['Vitesse']);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
如果我去http://localhost/chartservice/test.php?id_cycliste=80 我有以下結果：
[{"label":0,"y":37},{"label":2,"y":35},{"label":4,"y":5},{"label":6,"y":11},{"label":8,"y":23},{"label":10,"y":33},{"label":12,"y":27},{"label":14,"y":37}]
，但如果我去的HTML頁面我已經沒有圖形diplayed和我有folloing JS錯誤：
chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of nullc.createSvg @ chartist.min.js:8d @ chartist.min.js:8h @ chartist.min.js:8
您是否發現問題？你能幫我嗎？
感謝