绘制图表的条形宽度

时间:2014-10-22 09:07:45

标签: jquery asp.net asp.net-mvc charts flot

我在报告页面中使用了flot图表。该图表具有x轴,其中包含一些标签,如Quality of ServiceQuality of Performance等,但这些标签对于每个其他客户都是动态的。我的意思是标签对于其他客户来说可以是CarPlaneTruck,而x轴上的文本之间的字符差异会导致条形宽度的突然变化。据我所知,this answer的作者说,flot条形图的barWidth属性取决于x轴。在时间模式中,我以某种方式理解,但如果我在x轴中使用文本,barWidth如何确定?

编辑: 生成的代码 here

相同的宽度值,即0.1,图表中的两个不同视图:

具有较长x轴文本的那个 The one with longer x-axis texts

具有较短x轴文本的那个 The one with shorter x-axis texts

它来了,最糟糕的一个: enter image description here

1 个答案:

答案 0 :(得分:3)

您为生成的代码链接的第三张图片的说明:

x值为103,110和114(来自var d_main_quest_bar_20 = [[103, 8.25],[110, 8.75],[114, 7.75],];)。 x值之间的差异是7和4,这解释了条组之间的不同距离。您的条形宽度为0.4,因此每组条形图的总宽度约为1.6。你的酒吧集团居中。这一切都给出了:

start     end     width    description             tickname
--------------------------------------------------------------
102.2 to 103.8     1.6     first group of bars     Tesis
103.8 to 109.2     5.4
109.2 to 110.8     1.6     second group of bars    Program
110.8 to 113.2     2.4
113.2 to 114.8     1.6     third group of bars     Personel

因此,正如我在评论中提到的,即使您没有显示这些值,条形宽度和位置也是根据数据中的数值x值计算的。 (并且它与蜱名称的长度无关,就像你在问题中暗示的那样,这只是巧合。)

如果要显示距离相等且不关心其值的组,可以使用类别插件(example)。您必须检查/测试这是否与订单栏插件一起使用以及在这种情况下如何计算条宽。