在水平堆叠条形图中显示条内数值 - jQuery绘图库

7
我想在flot条形图(水平和堆叠)上显示柱子内的数值,类似这样:
|-------------------------------------------
|                 5                 |   1  |
|-------------------------------------------
|
|------------------------------------
|           3         |       2     |
|------------------------------------

我看到了这篇文章:在 Flot 柱状图中显示柱内的值。值仅出现在第一个堆叠柱内,而第二个值是当前总数,而不是当前柱对应的值,例如:
|-------------------------------------------
|                 5  6               |     |
|-------------------------------------------
|
|------------------------------------
|           3 5        |            |
|------------------------------------

有没有一个针对这个功能的好插件?

此外,我想增加栏内的字体大小。

谢谢!


以下是代码:

<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script>

var data = [
        {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]},
        {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]}
];

//reverse data for horizontal
for (series in data){
    var s = data[series];
    for (i=0;i<s.data.length;i++){
            var tmp = s.data[i][0];
        s.data[i][0] = s.data[i][1];
        s.data[i][1] = tmp;        
    }
}

var options = {
    series: {
        stack: 0,
        lines: {show: false, steps: false },
        bars: {
            show: true, 
            barWidth: 0.5, 
            align: 'center', 
            horizontal: true, 
            showNumbers: true
        },
    },
    yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]},
};

$.plot($("#flot-example-2"), data, options);

你能发布你的代码吗?http://codepen.io/pen/ - castillo.io
抱歉,我刚刚添加了代码,谢谢! - Shad Gagnon
您可以在此处查看演示:http://codepen.io/anon/full/mrbdK - Shad Gagnon
3个回答

5

我已更新flot-barnumbers以支持堆叠柱状图,请查看更新的示例。如果您需要其他功能,请给我发电子邮件或提出问题,我只是偶然看到了这个问题。


第一个问题:我该如何格式化数字?第二个问题:我该如何在鼠标悬停时显示这些值?谢谢。@dinosaurwaltz - Leandro Faria

1

看起来flot-barnumbers不支持堆叠条形图。这就是为什么值标记不正确的原因。我建议使用jqBarGraph,它是一个jQuery插件,用于实现堆叠条形图。

http://workshop.rs/jqbargraph/

希望这能有所帮助。


0

我最终决定使用Highcharts插件,因为它有更好的文档说明并且运行良好!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接