我之前已经使用 ChartJS(通过引用在线示例)成功绘制了一个简单的折线图，并从 MySQL DB 中提取了所需的数据。前一个图表中只有一行，因为我只从表中拉入一个字段(写入速度)。
现在我已经更新它以从数据库中提取三个字段(test_id、write_speed、read_speed)并在图表中显示两个折线图。但现在不行了。
作为 JavaScript 新手，我无法理解我哪里出了问题。任何帮助将不胜感激。
这是从数据库中提取数据的代码:
<?php
/**
* filename: data.php
*/
//setting header to json
header('Content-Type: application/json');
//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'simpletest');
//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}
//query to get data from the table
$query = "SELECT test_id, read_speed, write_speed FROM log2 ORDER BY test_id ASC";
//execute query
$result = $mysqli->query($query);
// All good?
if ( !$result ) {
// Nope
$message = 'Invalid query: ' . $link->error . "n";
$message .= 'Whole query: ' . $query;
die( $message );
}
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$mysqli->close();
//now print the data
print json_encode($data);
以下是脚本中调用的HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>Test Tesults New</title>
<style>
.chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div class="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/linegraph.js"></script>
</body>
</html>
下面是图表脚本:
$(document).ready(function() {
/**
* call the data.php file to fetch the result from db table.
*/
$.ajax({
url : "http://localhost/test/chartjs2/api/data.php",
type : "GET",
success : function(data)
{
console.log(data);
var testid = [];
var readspeed = [];
var writespeed = [];
for (var i in data)
{
testid.push("TestID " + data[i].test_id);
readspeed.push(data[i].read_speed);
writespeed.push(data[i].write_speed);
}
//get canvas
var chartdata = {
labels : testid,
datasets : [
{
label : "Read Speed in Gbps",
data : readspeed,
backgroundColor : "blue",
borderColor : "lightblue",
fill : false,
lineTension : 0,
pointRadius : 5
}
{
label : "Write Speed in Mbps",
data : writespeed,
backgroundColor : "blue",
borderColor : "darkblue",
fill : false,
lineTension : 0,
pointRadius : 5
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "New Test Results",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : true,
position : "bottom"
}
};
if (chart) {
chart.destroy();
}
//var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $("#mycanvas");
var chart = new Chart( ctx, {
type : "line",
data : chartdata,
options : options
} );
},
error : function(data) {
console.log(data);
}
});
});
我可能犯了一个非常愚蠢的错误，我可能完全无法理解，所以请指出是否确实做了一些愚蠢的事情。
谢谢。
最佳答案
这里有一个语法错误:
{
label : "Write Speed in Mbps",
应该是(添加逗号):
,{
label : "Write Speed in Mbps",
请检查您的控制台输出，也许使用 vscode 或 Atom 编辑您的 JavaScript 代码，因为编辑器也会告诉您语法错误。
确保您使用最新版本的 Chart.js(2.7.0 捆绑或带有依赖项)。
我无法使用固定数据重现该错误，因此它可能是代码中的语法错误、php 发送的错误 json 或 Chart.js 版本错误
var testid = [1,2,3,4,5];
var readspeed = [6,7,8,9,10];
var writespeed = [4,5,6,7,8];
var chartdata = {
labels : testid,
datasets : [
{
label : "Read Speed in Gbps",
data : readspeed,
backgroundColor : "blue",
borderColor : "lightblue",
fill : false,
lineTension : 0,
pointRadius : 5
}
,{
label : "Write Speed in Mbps",
data : writespeed,
backgroundColor : "blue",
borderColor : "darkblue",
fill : false,
lineTension : 0,
pointRadius : 5
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "New Test Results",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : true,
position : "bottom"
}
};
if (chart) {
chart.destroy();
}
var ctx = $('#mycanvas');
var chart = new Chart( ctx, {
type : "line",
data : chartdata,
options : options
}); <canvas id="mycanvas" width="400" height="400"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>关于javascript - 无法使用 ChartJS 绘制图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46599651/