我有以下数据,我通过json和ajax从mysql查询中动态获取。它只是不能填入图表。我在下面展示了我的样本数据看起来如何。我将一些简单的数据放入数据系列中,如下所示。我也试过这个chart.series [0] .setData(eval('('+ data +')'));不工作
["[1443843286000,0]",
"[1443843286000,100]",
"[1443843356000,200]",
"[1443843356000,0]",
"[1443843356000,100]",
"[1443843359000,0]"," ....
以下是mysql如何生成此数据的片段。
while($row = $selectQueryResult1->fetch())
{
$count++;
$dateTimer1 =$row['dateTimer']*1000;
$speed=$row['speed'];
$data[] = "[$dateTimer1,$speed]";
}
echo json_encode($data);
调用ajax和图表初始化。
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'dashBoardData',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Speed Graph:' ,
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d %H:%M',
minute: '%Y-%m-%d %H:%M',
hour: '%Y-%m-%d %H:%M',
day: '%Y-%m-%d %H:%M',
week: '%Y-%m-%d %H:%M',
month: '%Y-%m-%d %H:%M',
year: '%Y-%m-%d %H:%M'
},
title: {
text: 'Date Time'
},
labels: {
rotation: 0
}
},
yAxis: {
title: {
text: 'Speed (km/h)'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},
credits: {
enabled: false
},
series: [{
name: 'Speed Data'
}]
});
$("#SearchDb").click(function(){
var data = $(this).val();
var dateFrom=document.getElementById("beginDateInput").value;
dateTimeFromArray=dateFrom.split(" ");
dateFromArray=dateTimeFromArray[0].split("/");
var dateTo=document.getElementById("endDateInput").value;
dateTimeToArray=dateTo.split(" ");
dateToArray=dateTimeToArray[0].split("/");
mysqlDateFrom=dateFromArray[2]+"-"+dateFromArray[1]+"-"+dateFromArray[0]+" "+dateTimeFromArray[1];
mysqlDateTo=dateToArray[2]+"-"+dateToArray[1]+"-"+dateToArray[0]+" "+dateTimeToArray[1];
$.post('getSpeedGraph.php', {b: mysqlDateFrom,e:mysqlDateTo }, function(data){
chart.series[0].setData(["[1443843286000,0]","[1443843286000,100]","[1443843356000,200]","[1443843356000,0]","[1443843356000,100]","[1443843359000,0]","[1443843359000,0]","[1443843369000,0]","[1443843369000,0]","[1443843380000,0]","[1443843380000,0]","[1443843389000,0]","[1443843389000,0]","[1443843409000,0]","[1443843409000,0]","[1443843419000,0]","[1443843419000,0]","[1443843419000,0]","[1443843482000,0]","[1443843482000,0]","[1443843482000,0]","[1443843545000,17]","[1443843545000,20]","[1443843545000,20]","[1443843576000,0]","[1443843576000,0]","[1443843576000,0]","[1443843639000,7]","[1443843639000,7]","[1443843639000,6]","[1443843667000,0]","[1443843667000,0]","[1443843667000,0]","[1443843732000,0]","[1443843732000,0]","[1443843732000,0]","[1443843796000,0]","[1443843796000,0]","[1443843796000,0]","[1443843859000,0]","[1443843859000,0]","[1443843859000,0]","[1443843927000,0]","[1443843927000,0]","[1443843927000,0]","[1443843990000,0]","[1443843990000,0]","[1443843990000,0]","[1443844056000,0]","[1443844056000,0]","[1443844056000,0]","[1443844119000,0]","[1443844119000,0]","[1443844119000,0]","[1443844182000,0]","[1443844182000,0]","[1443844182000,0]","[1443844236000,0]","[1443844236000,0]","[1443844236000,0]","[1443844300000,0]","[1443844300000,0]","[1443844300000,0]","[1443844363000,0]","[1443844363000,0]","[1443844363000,0]","[1443844428000,0]","[1443844428000,0]","[1443844428000,0]","[1443844491000,0]","[1443844491000,0]","[1443844491000,0]","[1443844554000,0]","[1443844554000,0]","[1443844554000,0]","[1443844617000,0]","[1443844617000,0]","[1443844617000,0]","[1443844755000,0]","[1443844755000,0]","[1443844852000,0]","[1443844852000,0]","[1443844852000,0]","[1443844876000,0]","[1443844876000,0]","[1443844876000,0]","[1443844948000,0]","[1443844948000,0]","[1443844948000,0]","[1443845021000,0]","[1443845021000,0]","[1443845021000,0]","[1443845085000,10]","[1443845085000,10]","[1443845085000,9]","[1443845159000,0]","[1443845159000,0]","[1443845159000,0]","[1443845223000,0]","[1443845223000,0]","[1443845223000,0]","[1443845287000,0]","[1443845287000,0]","[1443845287000,0]","[1443845353000,0]","[1443845353000,0]","[1443845353000,0]","[1443845377000,13]","[1443845377000,12]","[1443845377000,11]","[1443845442000,0]","[1443845442000,0]","[1443845442000,2]","[1443845508000,0]","[1443845508000,0]","[1443845508000,0]","[1443845573000,0]"]);
}
);
}
);
});
});
答案 0 :(得分:1)
我发现解决方案很简单。只是为了帮助和参考其他只是运行此chart.series [0] .setData(eval(data));