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>

我得到以下输出=＆gt;

但我想让它显示2015年2月18日18:44，.........等为什么我的x轴错了？我哪里弄错了？我该如何解决？请帮忙。

Answer 1

您的时间戳以epoch为单位，以秒为单位。这是UNIX和PHP中的格式。在JavaScript中，你需要几毫秒的纪元。将时间戳乘以1000.这在Flot文档中描述为here。

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

new Date(142480344)
new Date(1424803440000)

使用flot获取错误的X轴

1 个答案: