php - javascript php mysql float

Question

我遇到了一个关于我的 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"})

它在 小时: 分钟。我应该更改什么以获得时间 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 }


         });

Answer 1

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

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]]);

}

编辑(Eugene Wong):

//变量选项 = { //xaxis: { ticks:[[1,time[1]],[2,time[2]],[3,time[3]],[4,time[4]],[5,time[5] ]],[6,时间[6]],[7,时间[7]],[8,时间[8]]]}//};//警报(选项.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;
                        }
                     }



         });