javascript php mysql flot

本文关键字：flot mysql php javascript | 更新日期: 2023-09-27

我遇到了一个关于x轴的新问题。我的意图是输出一个表示时间的x轴，而y轴表示功率。我决定用time[i]，用graph.push([time[i], power[i])。然而，我的图表仍然是空的。我做了一个警告输出函数，这是我得到的结果:

({1:"14:36", 2:"14:39", 3:"14:42", 4:"14:45", 5:"14:48", 6:"14:51", 7:"14:54", 8:"14:57"})

在hour: mins。我应该改变什么来得到时间x轴?

$(function () {
var graph = [];
var power = <?php echo json_encode($data);?>;
var time = <?php echo json_encode($times);?>;
var row = <?php echo json_encode($nrow);?>;
//alert(time.toSource());

for (var i = 1; i < row; i += 1) {
    //var test = time[i];
    //alert(test);
    graph.push([time[i], power[i]]);
}
var plot = $.plot($("#placeholder"),
       [ { data: graph, label: "Power" } ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 25 }

         });

您必须将时间从小时:分转换为数字

for (var i = 1; i < row; i += 1) {
    //var test = time[i];
    //alert(test);
    var hhmm = time[i].split(":");
    var hh = parseInt(hhmm[0]);
    var mm = parseInt(hhmm[1])/60;
    var tt = hh + mm;
    graph.push([tt, power[i]]);
}

EDIT (Eugene Wong):

//var options = {//xaxis:{蜱虫:[[1,时间[1]],[2,时间[2]],[3,时间[3]],[4、时间[4]],[5,时间[5]],[6、时间[6]],[7,时间[7]],[[8]8日时间]]}//};//警报(options.toSource ());

var plot = $.plot($("#placeholder"), 
       [ { data: graph, label: "Power" } ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 25 },
           xaxis: { mode: "time", timeformat:"%hh:%mm" }
           //xaxis: { ticks:[[1,time[1]],[2,time[2]],[3,time[3]],[4,time[4]],[5,time[5]],[6,time[6]],[7,time[7]],[8,time[8]]]}

       });

编辑(二极管):

尽管我以前创建过时间图表，但这个时间设置x轴配置不起作用。无论如何，我已经通过添加一个刻度格式化函数来解决这个问题。请参阅下面的代码。'graph'是我使用的示例数据数组。

    var graph = [[14.5, 10], [16.45, 15], [18.45, 20]];

    var plot = $.plot($("#placeholder"),
       [ { data: graph, label: "Power" } ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 25 },
           xaxis: {
                        min:14,
                        max:20,
                        tickSize:0.5,
                        tickFormatter: function(value){
                            var hours = Math.floor(value);
                            hours = (hours < 10)?"0"+hours:hours;
                            var minutes = (value - hours) * 60;
                            minutes = (minutes < 10)?"0"+minutes:minutes;
                            return hours + ":" + minutes;
                        }
                     }

         });

让PHP输出Javascript时间戳，而不是已经格式化的日期/时间。请记住一些关于时间戳的注意事项:

PHP的时间戳是秒，而javascript的是毫秒，所以乘以1000
使用UTC时间来绘制图表，因此在输出

记住在您的flot选项中指定xaxis: { mode: "time" }。