浮雕堆积条形图不堆积

Flot stacked bar chart not stacking

提问人:RichW 提问时间:9/4/2012 最后编辑:CalumRichW 更新时间:10/8/2014 访问量:5390

问:

我创建了一个 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
        }
      });
   }
JavaScript 浮点

评论


答:

9赞 Ryley 9/4/2012 #1

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

<!--[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

除此之外,我不确定问题会是什么 - 我运行了您的选项,一切看起来都很好。在此处查看实际操作

评论

1赞 RichW 9/5/2012
肯定包含堆栈.js文件。我检查了它是否通过 Firebug 加载,它报告了 HTTP 200。我浪费了几个小时......可能只是切换到 Google 图表!
0赞 Ryley 9/5/2012
@RichW - 一定是其他事情发生,因为显然你的代码是有效的!我想另一种可能性是你的数据对象中有一些奇怪的东西 - 也许你可以将一些示例数据对象编辑到你的问题中?
5赞 Justin Blackwood 2/8/2014 #2

我在使用 Flot 时遇到了同样的问题,并尝试显示堆积条形图。我发现,就我而言,这是由于系列未按日期升序排序引起的。

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

我也遇到过和你一样的情况,当有负值需要堆叠时。本机堆栈插件不支持此功能。您可以在此处查找用于在条形图中堆叠负值的替代插件

评论

0赞 ChiMo 10/20/2015
不错的插件。也适用于其他 flot 插件。