我有一个关于chart.js，php和infomix数据库的问题？
我有一个关于chart.js，php和infomix数据库的问题？
提问于 2018-06-18 21:21:23
Helloi有一个chart.js，php和informix数据库的问题。
首先，我用简单的mysql数据库测试这个脚本，它们工作得很好。
但是当我使用带有pdo的informix数据库时，他在标签为undefined的图表上向我展示。
=> my data.php (用于连接到数据库)：
<?php
header('Content-Type: application/json');
$db=new pdo("informix:host=uccxpub;service=1504;database=db_cra;server=uccxpub_uccx;protocol=onsoctcp;EnableScrollabelCursors=1;client_local=en_US.UTF8;db_locale=en_US.UTF8","uccxwallboard","cisco2016"
) or die("Impossible de se connecter !!!");
$sql0 = sprintf("SELECT * FROM RtCSQsSummary where CSQName = 'BMCE BANK'");
/*$stmt = $db->prepare($sql0);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
*/
$result = $db->query($sql0);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//now print the data
print json_encode($data);
?>对data.php的输出执行=>操作：
=> my bargraph.js：
$(document).ready(function(){
$.ajax({
url: "../data.php",
method: "GET",
success: function(data) {
console.log(data);
var startdatetime = [];
var loggedInAgents = [];
for(var i in data) {
startdatetime.push("startdatetime " + data[i].startdatetime);
loggedInAgents.push(data[i].loggedInAgents);
}
var chartdata {
labels: startdatetime,
datasets : [
{
label: 'loggedInAgents',
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: loggedInAgents,
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});对输出执行=>操作：
enter image description here => my index.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/bargraph.js"></script>
</body>
</html>!！条形图没有显示未定义的callshandled。
mysql数据库测试：
=> data.php：
<?php
//setting header to json
header('Content-Type: application/json');
//database
define('DB_HOST', '127.0.0.1');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root123');
define('DB_NAME', 'mydb');
//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 = sprintf("SELECT playerid, score FROM score ORDER BY playerid");
//execute query
$result = $mysqli->query($query);
//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);=>bargraph.js：
$(document).ready(function(){
$.ajax({
url: "http://localhost/data.php",
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
for(var i in data) {
player.push("Player " + data[i].playerid);
score.push(data[i].score);
}
var chartdata = {
labels: player,
datasets : [
{
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 ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});=> index.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/bargraph.js"></script>
</body>
</html>他工作得很好。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-19 22:33:32
我在我的Linux机器上运行了你的代码(有一些小的修复)。我可以使用来自Informix数据库的一些简单测试数据来显示条形图：
html页面：
informix@irk:/var/www/html# cat test.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="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="http://irk/b.js"></script>
</body>
</html>
informix@irk:/var/www/html# javascript：
informix@irk:/var/www/html# cat b.js
$(document).ready(function(){
$.ajax({
url: "http://irk/data.php",
method: "GET",
success: function(data) {
var obj=JSON.parse(data);
data=obj;
var startdatetime = [];
var loggedInAgents = [];
for(var i in data) {
startdatetime.push( data[i].STARTDATETIME);
loggedInAgents.push(data[i].LOGGEDINAGENTS);
}
var chartdata = {
labels: startdatetime,
datasets : [
{
label: 'loggedInAgents',
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: loggedInAgents
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
informix@irk:/var/www/html# 从Informix获取数据的php脚本：
informix@irk:/var/www/html# cat data.php
<?php
$db=new pdo("informix:database=enusutf8;server=irk1210;CLIENT_LOCALE=en_US.UTF8;DB_LOCALE=en_US.UTF8","informix","testpwd") or die("Impossible de se connecter !!!");
$sql0 = sprintf("SELECT * FROM RtCSQsSummary where CSQName = 'BMCE BANK'");
$result = $db->query($sql0);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
print json_encode($data);
?>
informix@irk:/var/www/html# 除了前面提到的大写/小写之外，JS函数获得的JSON数据必须在可以使用之前进行解析。否则，无论使用什么大小写，都会在'for(var I in data)‘循环中得到"undefied“值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50910512
复制相关文章
相似问题