Question

我正在使用Flot Graph Api绘制图表，我想在条形图中绘制时间值。

我的表看起来像是与此类似的东西

enter image description here

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

enter image description here

但我得到类似的东西，因为Json对象被错误地打包了。

enter image description here

如何在

中绘制时间值图表

我的情节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对象是这样的。

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

由于我是新手，我对这项工作很感兴趣，我做了一些研究，但我无法解决我的问题。有人可以帮助我。

Answer 1

问题不在于JSON，而在于您的数据本身。您的x轴值全部为零，因此Flot正确地将所有条形图绘制在彼此之上。

Answer 2

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

  [{"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"}]

现在我得到这样的图表，

enter image description here

如何在Flot Graph中绘制时间值

2 个答案: