GFlot/Flot：堆叠条形图未正确堆叠所有系列答案

【问题标题】：GFlot/Flot: Stacked bar chart not stacking all series correctlyGFlot/Flot：堆叠条形图未正确堆叠所有系列
【发布时间】：2012-10-16 21:54:36
【问题描述】：

我将 GWT 2.4 与 GFlot 2.4.3 结合使用，并且在堆叠六个系列时遇到了一个奇怪的问题。

您可以在下图中看到我的栏以及问题。我有六个系列（handler1 到 handler6）代表百分比，颜色用于区分系列并有其自身的含义，但这对我的问题并不重要。如果值大于 0.0，我只会将 DataPoints 添加到系列中。

此表显示前四个柱的数据，日期从时间戳转换为毫秒：

12.9.2012 | 0     0      0       0       100    
13.9.2012 | 0     0      0       99,529  0,417  
14.9.2012 | 0     0      99,935  0       0,065
15.9.2012 | 0     99,93  0       0       0,07

您可能会看到红色系列在 9 月 12 日和 13 日正确堆叠，但随后从 9 月 14 日起，Flot 突然停止堆叠条形图，您可以看到底部的小红色条形图。另请注意，9 月 14 日的红条稍微移到了 9 月 13 日，这将继续使用以下日期/x 值。

我在值中添加了一个固定数字以增加条形的大小，并且能够看到 GFlot 没有正确堆叠条形的原因是它们不共享相同的 x 值，但这很荒谬正如我也验证过的那样——输出到System.err——所有系列的 x 值都是相同的！

例如：对于带有黄色和红色且正确堆叠的第二条，正在生成此输出：

系列处理程序 3：x 值：1.347.487.200.000
系列处理程序 4：x 值：1.347.487.200.000

堆叠不正确的第三条有这样的输出：

系列处理程序 2：x 值：1.347.573.600.000
系列处理程序 4：x 值：1.347.573.600.000

因此，对于两个条形，每个相关系列的 x 值相同，但堆叠在第二个条形之后停止工作。 这是怎么回事？我该怎么做才能防止这种情况发生？

这个问题似乎只发生在这个数据上，当绘制不同的数据时，它会按预期工作，如下图所示：

这是将数据添加到系列的代码。 multipleData 是一个对象，其中 x 值是 Double，y 值是 ArrayList<Double>，query.getData() 返回 ArrayList<multipleData>，md.getvalue() 返回 ArrayList，其中 y 值包含在multipleData 对象。

handlers[]-array 显然是包含六个系列处理程序的数组。是的，我的情节代码中有一个options.setStack(true); ;)

for(multipleData md : query.getData()) {
   if(!md.getValue().isEmpty()) {
      for(int i=0; i < 5; i++) {
         if(md.getValue().get(i) > 0.0) {
            handlers[i].add(new DataPoint((md.getPoint(), md.getValue().get(i)));
         }
      }
   }
}

从 10 月 17 日开始编辑：此图像具有完全不同的数据库，并且非常清楚地显示了问题。起初，条形图没有堆叠，突然堆叠按预期工作：

【问题讨论】：

一段时间后，我注意到只有在一个 x 值的处理程序之间存在间隙时才会发生这种情况。 IE。 handler1 有数据，下一个有数据的处理程序是 handler6，然后会发生这种情况，正如我在一小时前为 9 月 9 日至 9 月 11 日的栏添加的图像中所见。一种解决方法是添加虚拟数据点，但这会产生条形顶部和底部的细线，具体取决于数据。这看起来相当难看:(

标签： java gwt charts flot bar-chart

【解决方案1】：

我能够通过添加虚拟数据点并结合将 line width 设置为 0（调整 .setLineWidth(0) 时 BarSeriesOptions）自己解决问题。

如果没有将线宽设置为 0，Flot 似乎会在堆叠条的底部和顶部生成空 DataPoints 的轮廓，这看起来很丑陋，并且还给人一种没有数据/应该有数据的外观。

【讨论】：