0
저는 ChartJS (온라인 예제를 참조)를 사용하여 간단한 선 그래프를 성공적으로 그렸고 MySQL DB에서 필요한 데이터를 가져 왔습니다. 이전에는 테이블에서 한 필드 만 뽑아 (쓰기 속도) 그래프에 한 줄만있었습니다.ChartJS를 사용하여 차트를 그릴 수 없습니다.
DB에서 세 개의 필드 (test_id, write_speed, read_speed)를 가져 와서 두 개의 선 그래프를 차트에 표시하도록 업데이트했습니다. 하지만 지금은 효과가 없습니다.
JavaScript에 상당히 익숙하지 않아서 어디서 잘못 될지 이해할 수 없습니다. 어떤 도움이라도 대단히 감사하겠습니다. 여기
코드는 DB에서 데이터를 당기고 다음<?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",
는 AS 자바 스크립트 코드를 편집 vscode 또는 원자를 사용 어쩌면 당신의 콘솔 출력을 확인하시기 바랍니다
가 보낸 잘못된 JSON 당신은 시도 할 수 콘솔에서 (dev 도구, 콘솔 탭의 경우 F12) 스크립트의 출력 내용을 확인하십시오. 스크립트에'debugger;'문을 추가하십시오. devtools를 열면 해당 행에서 일시 중지되고 데이터가 올바른지 검사하여 올바른지 확인하십시오. – HMR
오류가 발생할 수있는 신고 전에 차트를 파괴하고 있다고 생각합니다. –
내 답변이 업데이트되었습니다. 구문 오류, 잘못된 chartjs 버전 (번들 없음) 또는 유효하지 않은 json입니다. 크롬 개발 도구를 사용하여 코드의 문제점을 확인하도록 조언합니다. – HMR