【发布时间】:2018-08-17 18:27:25
【问题描述】:
我可以通过 Chart.js 成功创建图表。问题是我想根据特定客户的 ID 生成图表。例如,如果我要拜访客户http://localhost/test/view_customer?customer_id=21&operation=edit。我想使用客户 ID 21 的 bdi 与日期来生成图表。
我尝试了许多不同的解决方案,但都没有成功。我想知道是否有通过 AJAX 执行 SQL 请求并使用该数据生成图形的方法。
这是我的 SQL 代码,它从 URL 中获取 ID 并生成一个可由 chart.js 读取以创建折线图的字符串:
<?php
//Gets customer ID from URL
$cid = htmlentities ($_GET['customer_id']);
//query to get data from the table
$sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");
$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "i", $cid);
mysqli_stmt_execute($stmt);
$data = array();
mysqli_stmt_bind_result($stmt, $bdi, $date);
while(mysqli_stmt_fetch($stmt)) {
$data[] = array('bdi' => $bdi, 'date' => $date);
}
//free memory associated with result
$result->close();
//now print the data
print json_encode($data); ?>
这是我用来生成折线图的代码:
$(document).ready(function(){
$.ajax({
url: "http://localhost/test/data.php",
method: "GET",
success: function(data) {
console.log(data);
var bdi = [];
var date = [];
for(var i in data) {
date.push( data[i].date);
bdi.push(data[i].bdi);
}
var chartdata = {
labels: date,
datasets : [
{
label: 'BDI',
backgroundColor: 'rgba(239, 243, 255, 0.75)',
borderColor: 'rgba(84, 132, 255, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: bdi
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
responsive: true,
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent",
display: false
},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
},
tooltips: {
backgroundColor: 'rgba(255,255,255)',
titleFontColor: 'rgb(184,189,201)',
bodyFontColor: 'black',
displayColors: false,
borderColor: 'rgb(214,217,225)',
borderWidth: 1,
caretSize: 5,
cornerRadius: 2,
xPadding: 10,
yPadding: 10
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
目前我使用的 URL http://localhost/test/data.php 包含一串数据:
[{"bdi":"4","date":"2018-07-11"},{"bdi":"1","date":"2018-07-21"},{"bdi":"5","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"3","date":"2018-07-22"},{"bdi":"2","date":"2018-07-23"},{"bdi":"12","date":"2018-07-23"},{"bdi":"3","date":"2018-07-24"},{"bdi":"2","date":"2018-07-25"},{"bdi":"12","date":"2018-07-30"},{"bdi":"3","date":"2018-07-30"},{"bdi":"4","date":"2018-07-30"},{"bdi":"11","date":"2018-07-30"}]
而不是使用 URL 来链接数据。我希望 AJAX 运行我的 SQL 代码并生成图形(其中treatment_fk 是一个变量)。
问题:
1.是否可以在 AJAX 中执行 SQL 命令来生成图表,其中 ID 是从 URL 收集的变量?(我该怎么做?)
2。有没有更好的办法?我该怎么做?
【问题讨论】:
-
评论不用于扩展讨论;这个对话是moved to chat。
标签: php jquery sql ajax chart.js