2

我对 Flotr2 相当陌生，我刚刚构建了一些简单的折线图。这很简单，也很酷。但是，我需要将时间戳（月日年加上一天中的时间）作为我的 x 轴。我从我的数据库中获取时间，所以它在 php 代码中，我只是像这样回显数据：

while($stmt11->fetch()){
                echo " [" . $date_of_completion . ", " . $score . "]";
                echo ",";
                $i++;
                $total_score += $score;
            }
            echo "];";

而且我已将 xaxis 的模式设为“时间”，并且尝试了“日期”，但它永远无法正常工作。它一直把所有东西都放在 2001-2002 之间，这是完全错误的，所以我认为它只是不知道如何处理我给它的数据。有没有其他人遇到过这个问题？我已经浏览了他们按时给出的例子，但这对我来说毫无意义。

任何帮助都将不胜感激。谢谢

编辑好的，这里有更多代码。这正是我从 php 中获取数据并将其转换为 fltr2 所需格式的工作。

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"));
4

3 回答 3

3

该time模式采用时间值，因此将您的日期转换为以毫秒为单位的纪元时间。有关如何将日期转换为纪元时间的信息，请参阅http://php.net/manual/en/function.date.php ，并记住 php 使用秒（而不是像 JavaScript 和 Flotr2 那样的毫秒）。您还需要将timeformatx 轴上的 设置为给定格式，例如：%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)
于 2012-06-28T16:43:13.613 回答
2

好的，所以在@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 都与顶部的原始问题相同。

于 2012-06-29T19:50:55.980 回答
1

您的问题很简单...为了使用内置的格式化程序，您必须在 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 代码并未明确说明此问题。

于 2012-11-07T16:25:42.227 回答