Flot堆叠条形图未正确堆叠

Question

我已经创建了一个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
        }
      });
   }

- RichW

Answer 1

最可能的问题是您在flot之后没有包含stack插件。在您的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标签。

除此之外，我不确定问题是什么 - 我运行了你的选项，一切看起来都很好。在这里查看它的操作。

- Ryley

---

肯定已经包含了 stack.js 文件。我通过 Firebug 检查它是否正在加载，并报告 HTTP 200。我在这上面浪费了几个小时，也许应该改用 Google Charts！ - RichW

@RichW - 肯定还有其他问题，因为显然你的代码是可以工作的！我猜另一个可能性是你的数据对象中存在一些奇怪的东西 - 也许你可以在问题中编辑一些示例数据对象？ - Ryley

Answer 2

我遇到了与 Flot 相同的问题，试图显示堆叠条形图。我发现在我的情况下，这是由于系列未按日期升序排序导致的。

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

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

- Justin Blackwood

---

不错的插件。与其他flot插件也很兼容。 - ChiMo