我想在网页中以双条形图的形式显示数据库中的数据。为此，我在 c-panel 服务器上的数据库中创建了表，并编写了一个链接它的 php 脚本，并且它工作正常。但是当我将它与我的 Chart.js 脚本链接时，它没有显示任何结果。 bargraph.html
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="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/app.js"></script>
</body>
app.js
$(document).ready(function(){
$.ajax({
url: "http://studyleagueit.com/prashant/data.php",
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
var score1 = [];
for(var i in data) {
player.push("Player " + data[i].playerid);
score.push(data[i].score);
score1.push(data[i].score1);
}
var densitydata = {
label: 'Player Score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
var gravitydata = {
label: 'Player Score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score1
}
var chartdata = {
labels: player,
datasets : [densitydata, gravitydata]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
最佳答案
两种可能的解决方案:
- 您的库似乎未正确加载。尝试通过 CDN 拉取它们，看看是否有效。我尝试运行这个 fiddle :
http://jsfiddle.net/25oqkhz7/11/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
但是由于 CORS，我无法获取数据。
- 这也可能是您的问题，如果您的本地域不允许访问 AJAX 请求中该网址的数据，则您对该网址无能为力。您可以手动下载数据并从某个本地文件引用它，但在您的开发域被列入白名单之前，您无法执行此类 GET 请求。
你的console.log()说什么？也许通过更多的输入，我们可以更加精确。
关于javascript - Chart.js 未与在线数据库和 php 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49487237/