在条形图中显示值 - jQuery 绘制水平堆积条形图答案

【问题标题】：Show value within the bar - jQuery plot horizontal stacked bar chart在条形图中显示值 - jQuery 绘制水平堆积条形图
【发布时间】：2012-10-11 15:11:11
【问题描述】：

我想在浮动条形图（水平和堆叠）上显示条内的值，如下所示：

|-------------------------------------------
|                 5                 |   1  |
|-------------------------------------------
|
|------------------------------------
|           3         |       2     |
|------------------------------------

我看到了这个帖子：Show value within bar on flot bar chart 这些值仅出现在第一个堆叠条内。第二个值是当前总和，不是当前柱的对应值，例如：

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

【问题讨论】：

你能发布你的代码吗？ codepen.io/pen
对不起，我刚刚添加了代码，谢谢！
你可以在这里看到演示：codepen.io/anon/full/mrbdK

标签： jquery charts flot stacked

【解决方案1】：

我已更新 flot-barnumbers 以支持堆叠条，请参阅更新后的 examples。如果您需要任何其他功能，请给我发电子邮件或打开问题，我只是偶然看到这个问题。

【讨论】：

第一个问题：如何格式化数字？第二个问题：如何仅在鼠标悬停时显示这些值？谢谢。 @dinosaurwaltz

【解决方案2】：

flot-barnumbers 似乎不支持堆积条形图。这就是价值标签不正确的原因。我推荐使用 jqBarGraph，这是一个 jQuery 插件来实现堆叠条形图。

http://workshop.rs/jqbargraph/

希望对你有帮助。

【讨论】：

【解决方案3】：

我最终决定使用Highcharts Plugin，因为它的文档更好，而且效果很好！

【讨论】：