9

我创建了一个 Flot 堆叠条形图，但这些块似乎没有堆叠——它们都从 0 开始（在图表的底部）。

流动图

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
        }
      });
   }
4

2 回答 2

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标签。

除此之外，我不确定问题出在哪里——我运行了你的选项，一切看起来都很好。在这里查看它的实际应用。

于 2012-09-04T15:53:22.433 回答
5

我在使用 Flot 时遇到了同样的问题，并试图显示堆叠的条形图。我发现在我的情况下，这是由于系列未按日期升序排序引起的。

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

当需要堆叠负值时，我也遇到了与您相同的情况。本机堆栈插件不支持此功能。您可以在此处查找用于在条形图中堆叠负值的替代插件

于 2014-02-08T00:01:47.303 回答