使用 flot 获取错误的 X 轴

Question

我正在使用 php 从数据库中获取数据并将数据存储到数组中

在数据库中，第一个是带时间的日期（时间戳），下一个是值。

echo json_encode($arr);

我得到以下输出

[[1424803440,15.739993],[1424804580,13.698263],[1424805780,13.214383],[1424806980,15.393282],[1424808180,14.356073],...........]

现在

<script type="text/javascript">
var updateinterval=1000;
var data=[];
function getdata(){
data=<?php echo json_encode($arr); ?>;
}
var options={
                series: {
                        lines: {
                                show: true,
                                //lineWidth: 2,
                                fill: true
                                },
                        points:{
                                show: "triangle"
                                }
                        },
xaxis: {
    mode: "time",
    TickSize: [1, "minute"],
    //timeformat: '%d/%m %H:%M:%S',     
    tickFormatter:function (v, axis) {
    var date = new Date(v);
    if (date.getMinutes() % 1 == 0) {
    var years= date.getYear() <70 ? "0" +date.getYear() :date.getYear();
    var dates=date.getDate() <10 ? "0" +date.getDate() : date.getDate();
    var months=date.getMonth()< 10 ? "0" +(date.getMonth()+2) :date.getMonth();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                return dates+ "-"+ months+ "-"+ years +" "+hours + ":" + minutes + ":" + seconds;
    } 
                else {
                return "";
                }
                },
                        
                axisLabel: "Time",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10
                },
                    yaxis: {
                            
                            axisLabel: "Data loading",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: 'Verdana, Arial',
                            axisLabelPadding: 6
                        },
               legend: {        
                            labelBoxBorderColor: "#B0D5FF"
                        },
                    grid: {
                            hoverable: true, 
                            clickable: true,
                            //backgroundColor: { 
                                                //colors: ["#B0D5FF", "#5CA8FF"] 
                                            //}
                            }
};
   $(document).ready(function () {
            getdata();
            var dataset=[
              { 
                label: "Data", 
                data: data, 
                points: { 
                            symbol: "triangle"
                        } 

             }
            ];
        $.plot($("#flot-container"), [dataset], options);

function update() {
                getdata();
                if(data.length>15){
                    data.shift();   
                }
                $.plot($("#flot-container"), dataset, options);
                setInterval(update, updateinterval);
                }
 
    update();
});

</script>

我得到以下输出=>

但我希望它显示 2015 年 2 月 24 日 18:44，......等等为什么我得到错误的 x 轴？我哪里做错了？我该如何解决？请帮忙。

Answer 1

您的时间戳是自 Flot 文档中 epoch. This is the format in UNIX and PHP. In JavaScript you need milliseconds since epoch. Multiply your timestamps with 1000. This is described here 以来的秒数。

您可以通过在浏览器控制台中比较这两行来看到这一点：

new Date(142480344)
new Date(1424803440000)

使用 flot 获取错误的 X 轴

Getting wrong X-axis using flot

javascript

php

flot