如何在Flot Graph中绘制时间值 [英] How to plot time values in Flot Graph

问题描述

我正在使用绘制图形Api 来绘制图形，我想在条形图中绘制时间值.

I am using Flot Graph Api to plot graphs, I want to plot time values in bar charts.

我的桌子看起来像与此类似的东西

My table look like some thing similar to this

我的X轴应该是原因"列表，而Y轴应该是时间变量.我的图表应该是这样的.

My X-Axis should be list of Reasons and Y-Axis should be time variables. My Graph should be some thing like this.

但是我得到了类似的东西，因为Json对象包装错误.

but i get something like this, because of the Json object is packed wrongly.

如何在

我的剧情JS代码是

    <script language="javascript" type="text/javascript">  
$(document).ready(function(){
$.getJSON('ReasonByTime.txt', function(json) {
   //succes - data loaded, now use plot:
       var plotarea = $("#placeholder");
       var dataBar=json.data;
        $.plot(plotarea , [
            {
                data: dataBar,
                bars: { show: true},
                legend: {show: true},
                yaxis: {
                    mode: 'time',
                    timeformat: "%y/%m/%d",
                        min: ( new Date('2012/01/01') ).getTime(),
                        max: ( new Date('2020/01/01') ).getTime(), 
                        minTickSize: [1, 'hour']
                }
            }          
        ]
    );
});

});

我当前的Json对象就是这样.

and my current Json object is like this.

  {"data":[[0,5202],[0,19620],[0,82920],[0,240],[0,75720],[0,3060],[0,72840]],"label":"Tea break"}

由于我不熟悉该工作，因此进行了一些研究，但无法解决我的问题.有人可以帮我吗?

Since i'm new to flot i'm struck up with this work, i did some research but i can't able to solve my problem. Can someone help me out.

推荐答案

感谢DNS，问题是我所有的x轴值均为零，所以我以以下格式更改了JSON，

Thanks to DNS, the problem is the all my x-axis values are zero, so i changed my JSON in the following format,

  [{"data":[[0,5202]],"label":"Over Time"},{"data":[[1,19620]],"label":"Shift Start"},{"data":[[2,82920]],"label":"Maintenance break"},{"data":[[3,240]],"label":"Lunch break"},{"data":[[4,75720]],"label":"BreakDown"},{"data":[[5,3060]],"label":"Break"},{"data":[[6,72840]],"label":"Tea break"},{"data":[[6,79260]],"label":"Power Failure"}]

现在我得到这样的图形

这篇关于如何在Flot Graph中绘制时间值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！