我对Flotr2相当陌生,我刚刚构建了一些简单的折线图。这很简单,而且非常酷。但是,我需要将时间戳(月日年加上一天中的时间)作为我的 x 轴。我从我的数据库中获取时间,所以它是 php 代码,我只是像这样回显数据:
while($stmt11->fetch()){
echo " [" . $date_of_completion . ", " . $score . "]";
echo ",";
$i++;
$total_score += $score;
}
echo "];";
我使xaxis的模式是"时间",我尝试了"日期",但它永远不会起作用。它一直在把2001-2002年之间的所有东西都放在完全错误的,所以我认为它只是不知道如何处理我给它的数据。还有其他人遇到过这个问题吗?我已经看了他们按时给出的例子,但这对我来说毫无意义。
任何帮助将不胜感激。谢谢
编辑好的,这里有更多的代码。这正是我正在做的,将数据从 php 中取出并将其转换为 flotr2 想要的格式。
if(!($stmt11 = $mysqliprivate->prepare("SELECT date_of_completion, score FROM ". $shs . " WHERE id = ? ORDER BY date_of_completion ASC"))){
echo "Prepare Failed: (" . $mysqliprivate->errno . ") " . $mysqliprivate->error;
}
else{
$total_score = 0;
$stmt11->bind_param("s", $id);
$stmt11->execute();
$stmt11->bind_result($date_of_completion, $score);
$time = time();
echo "var dataset = [";
$i = 0;
while($stmt11->fetch()){
$date = date("U", strtotime($date_of_completion));
echo " [" . $date . ", " . $score . "]";
echo ",";
$i++;
}
echo "];";
$stmt11->close();
}
这是我正在运行的javascript:
graph = Flotr.draw(container, [
{ data : dataset, label : 'Historical Patient Scores', lines:{show:true}, points: {show:true}}
], {
xaxis: {
minorTickFreq: 4,
title : 'Date of Completion',
tickDecimals: 0,
noTicks: 10,
mode : 'time',
timeformat : '%y/%m/%d'
},
yaxis : {
max : 30,
title : 'Score',
tickDecimals:0,
min: 0
},
grid: {
minorVerticalLines: true
},
legend : {
position : 'nw'
},
mouse: {
track: true,
relative:true,
trackDecimals:0,
sensibility: 5
}
});
})(document.getElementById("editor-render-0"));
time
模式采用时间值,因此请将日期转换为新纪元时间(以毫秒为单位)。请参阅 http://php.net/manual/en/function.date.php 了解如何将日期转换为纪元时间,并记住 php 使用秒(而不是像 JavaScript 和 Flotr2 那样的毫秒)。您还需要将 x 轴上的timeformat
设置为给定格式,例如:%m/%d/%y
在纪元时间过去后:
xaxis: {
mode: "time",
timeformat: "%m/%d/%y"
},
这会将时间转换回日期格式标签。
您可以使用以下内容:
%h: hours
%H: hours (left-padded with a zero)
%M: minutes (left-padded with a zero)
%S: seconds (left-padded with a zero)
%d: day of month (1-31), use %0d for zero-padding
%m: month (1-12), use %0m for zero-padding
%y: year (four digits)
%b: month name (customizable)
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24
%P: AM/PM (uppercase version of %p)
所以经过@Chase,我一直在尝试让它工作一段时间,我想我明白了。我破解了我自己的tickFormatter函数。它确实没有太多的文档,但一些简单的JavaScript知识就足够了。所以为了获得纪元时间,我只是这样做:
echo "var dataset = [";
$i = 0;
while($stmt11->fetch()){
$temp = strtotime($date_of_completion);
echo " [" . $temp . ", " . $score . "]";
echo ",";
}
echo "];";
$stmt11->close();
然后为了有时间正确出现,而不仅仅是疯狂的数字,这就是我拼凑起来的:
xaxis: {
minorTickFreq: 4,
title : 'Date of Completion',
tickDecimals: 0,
noTicks: 20,
mode : 'time',
labelsAngle : 45,
tickFormatter: function(x){
var x = parseInt(x);
var myDate = new Date(x*1000);
var string = myDate.getFullYear();
string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
result = string;
return string;
}
},
然后,如果您希望鼠标悬停产生相同的结果,请将以下代码放在鼠标中:
mouse: {
track: true,
relative:true,
trackDecimals:0,
sensibility: 5,
trackFormatter: function(o){
var t = parseInt(o.x);
var myDate = new Date(t*1000);
var string = myDate.getFullYear();
string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
return string + ", " + o.y;
}
}
其余的javascript和php都与顶部的原始问题相同。
你在这里的问题很简单...为了使用内置的格式化程序,你必须在Javascript中传入Date对象。喜欢这个。。。
var dataArray = [[new Date('08/16/2012 03:40:15.000'),21.8917228040536],
[new Date('08/16/2012 03:40:15.000'),21.8917228040536]]
查看最终渲染的 Javascript 以寻找线索 - PHP 代码没有明确说明这个问题。