Flot条形图:在时间轴上重叠的条形图

时间:2022-12-03 18:01:08

I am trying to plot expense data against time axis, and I see the data bars are overlapping if they are showing data for the same date. I was expecting the graph to show the bars asjascent to each other but that is not the case. See a sample of code at this link...

我正在尝试根据时间轴绘制费用数据,如果数据条显示的是相同日期的数据,那么它们就会重叠。我希望这个图能显示出彼此间的距离,但事实并非如此。查看此链接的代码示例…

$.plot($("#placeholder"), newJson, 
{
    bars: {
        show: 1,
        barWidth: 24 * 60 * 60 * 1000 * 10
    },
    xaxis: { mode:"time" }
});

Flot条形图:在时间轴上重叠的条形图

2 个解决方案

#1


5  

Unfortunately, that isn't possible in flot without using some sort of plugin. I suggest you either use the stacking plugin to get a vertical stack, or an external plugin like orderBars.

不幸的是,如果不使用某种插件,在flot中这是不可能的。我建议您要么使用堆栈插件获得垂直堆栈,要么使用外部插件,如orderBars。

In each of them, you add an option to each series specifying that it should be stacked/ordered. Or to the overall series options for bars if you want it to apply for everything.

在每个系列中,您都可以在每个系列中添加一个选项,指定它应该是堆叠/有序的。如果你想让它适用于所有的东西,也可以选择整个系列。

$.plot($("#placeholder"), newJson, 
    {bars: { order:1, show: 1, barWidth: 24 * 60 * 60 * 1000 * 10 },
     xaxis: { mode:"time" }
});

Here's a working example: http://jsfiddle.net/ryleyb/A8yNV/7/

这里有一个工作示例:http://jsfiddle.net/ryleyb/A8yNV/7/

#2


0  

I've just solved an issue with the ORDER property : it does not work if one of the serie has a NULL value. Indeed, I was using NULL value to avoid a get a tiny (0) line for the serie, but in this case the following order of the stacks are completely disturb. By setting a 0 (ZERO) instead of NULL : all is okay.

我刚刚解决了一个订单属性的问题:如果一个意甲有空值,它就不能工作。实际上,我使用NULL值来避免在意甲中出现一个很小的(0)行,但是在这种情况下,栈的顺序完全被打乱了。通过设置0(0)而不是NULL:一切正常。

Note : the same problem with or without the "orderBars plugin".

注意:“orderBars插件”是否存在同样的问题。

Hope this will help.

希望这将帮助。

#1


5  

Unfortunately, that isn't possible in flot without using some sort of plugin. I suggest you either use the stacking plugin to get a vertical stack, or an external plugin like orderBars.

不幸的是,如果不使用某种插件,在flot中这是不可能的。我建议您要么使用堆栈插件获得垂直堆栈,要么使用外部插件,如orderBars。

In each of them, you add an option to each series specifying that it should be stacked/ordered. Or to the overall series options for bars if you want it to apply for everything.

在每个系列中,您都可以在每个系列中添加一个选项,指定它应该是堆叠/有序的。如果你想让它适用于所有的东西,也可以选择整个系列。

$.plot($("#placeholder"), newJson, 
    {bars: { order:1, show: 1, barWidth: 24 * 60 * 60 * 1000 * 10 },
     xaxis: { mode:"time" }
});

Here's a working example: http://jsfiddle.net/ryleyb/A8yNV/7/

这里有一个工作示例:http://jsfiddle.net/ryleyb/A8yNV/7/

#2


0  

I've just solved an issue with the ORDER property : it does not work if one of the serie has a NULL value. Indeed, I was using NULL value to avoid a get a tiny (0) line for the serie, but in this case the following order of the stacks are completely disturb. By setting a 0 (ZERO) instead of NULL : all is okay.

我刚刚解决了一个订单属性的问题:如果一个意甲有空值,它就不能工作。实际上,我使用NULL值来避免在意甲中出现一个很小的(0)行,但是在这种情况下,栈的顺序完全被打乱了。通过设置0(0)而不是NULL:一切正常。

Note : the same problem with or without the "orderBars plugin".

注意:“orderBars插件”是否存在同样的问题。

Hope this will help.

希望这将帮助。