我正在尝试从数据库实现图表,但我遇到了一些问题......
我有一个包含2行的数据库:Date,Pcr
我的文件.php:
Data.php
$query = "SELECT * FROM `table1` ORDER BY Date LIMIT 0 , 100";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
$dates=array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$dates[] = $row['Date'];
$dates[] = $row['Pcr'];
}
echo json_encode($dates);
我得到了数组: 的 [ “2015年6月14日”, “0.77”, “二零一五年六月二十零日”, “0.79”, “2015年9月24日”, “0.88”, “2015年10月26日”,“0.8 ”, “二○一五年十月三十零日”, “0.7”]
我想从这个数组中获取动态图表,但我不知道该怎么做......
我有这个静态文件:
chart.php
<div class="resultados"><canvas id="grafico"></canvas></div>
<script>
$(document).ready(function(){
$.ajax({
type:'POST',
url:'data.php',
success:function(data){
var valores = eval(data);
var date1 = valores[0];
var pcr1 = valores[1];
var date2 = valores[2];
var pcr2 = valores[3];
var date3 = valores[4];
var pcr3 = valores[5];
var date4 = valores[6];
var pcr4 = valores[7];
var Datos = {
labels : [date1,date2,date3,date4],
datasets : [
{
fillColor : 'rgba(255,0,0,0.1)',
strokeColor :'rgba(255,0,0,100)',
pointColor : 'rgba(255,0,0,100)',
pointStrokeColor:"#e32636",
pointHighlightFill:"#bbf",
pointHighlightStroke:"rgba(255,0,0,255)",
data : [pcr1,pcr2,pcr3,pcr4]
}
]
}
var contexto = document.getElementById('grafico').getContext('2d');
window.Barra = new Chart(contexto).Line(Datos, { responsive : true });
}
});
return false;
}
)
</script>
有人可以帮助我找到我要放入数据的内容:[]?
非常感谢
答案 0 :(得分:0)
PHP:
$dates=array();
$pcrs=array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$dates[] = $row['Date'];
$pcrs[] = $row['Pcr'];
}
$data = ["dates"=>$dates,"pcrs"=>$pcrs];
echo json_encode($data);
JS:
$(document).ready(function(){
$.ajax({
type:'GET',
url:'data.php',
success:function(data){
var Datos = {
labels : data.dates,
datasets : [
{
fillColor : 'rgba(255,0,0,0.1)',
strokeColor :'rgba(255,0,0,100)',
pointColor : 'rgba(255,0,0,100)',
pointStrokeColor:"#e32636",
pointHighlightFill:"#bbf",
pointHighlightStroke:"rgba(255,0,0,255)",
data : data.pcrs
}
]
}
var contexto = document.getElementById('grafico').getContext('2d');
var chrt = new Chart(contexto).Line(Datos, { responsive : true });
}
});
return false;
}
)