Flot堆积条形图不堆叠

时间:2012-09-04 11:12:47

标签: javascript flot

我创建了一个Flot堆积条形图,但这些块似乎没有堆叠 - 它们都从0开始(在图表的底部)。

Flot chart

4个区块的值为:

  • 鲜绿色 - 1
  • 紫色 - 28
  • 红色 - 83
  • 浅绿色 - 195

如果它堆叠正确,它应该在307的高度。任何关于什么是错的想法?​​

   drawLineChart: function(el,data,ticks,labelstr) {
      var plot = $.plot(el, data, {
        series: {stack: true,
             lines: {show: false, steps: false},
             bars: {show: true, barWidth: 0.4, align: 'center'}
        },
        xaxis: {
            ticks: ticks
        },
        yaxis: {
            min: 0,
        },
        grid: {
            color: '#aaa',
            borderWidth:0,
            axisMargin:0,
            hoverable: true,
            autoHighlight: false
        },
        legend: {
            show: true,
            position: "ne",
            noColumns: 1
        }
      });
   }

2 个答案:

答案 0 :(得分:9)

最可能的问题是你没有在flot之后包含堆栈插件。在你的head标签中,你应该有这样的东西:

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>

在这种情况下,关键是最后script代码。

除此之外,我不确定问题是什么 - 我运行你的选择,一切看起来都很好。 See it in action here

答案 1 :(得分:5)

我遇到与Flot相同的问题并试图显示堆积的条形图。我发现在我的情况下,它是由于系列没有按日期升序排序造成的。

按日期升序排序后,系列开始正确堆叠。

当存在需要堆叠的负值时,我也会遇到与您相同的情况。本机堆栈插件不支持此功能。您可以在此处查看用于在bar chart

中叠加负值的替代插件