在条形图中显示值-jQuery打印水平堆叠条形图

在条形图中显示值-jQuery打印水平堆叠条形图,jquery,charts,flot,stacked,Jquery,Charts,Flot,Stacked,我想在flot条形图(水平和堆叠)上显示条形内的值,如下所示: |------------------------------------------- | 5 | 1 | |------------------------------------------- | |------------------------------------ | 3 | 2 | |----

我想在flot条形图(水平和堆叠)上显示条形内的值,如下所示:

|-------------------------------------------
|                 5                 |   1  |
|-------------------------------------------
|
|------------------------------------
|           3         |       2     |
|------------------------------------
我看到这个帖子: 这些值仅显示在第一个堆叠条内。第二个值是当前总计,而不是当前条的对应值,例如:

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

风险值数据=[
{label:'label 1',颜色:#80FF80',数据:[[1,5],[2,3]},
{标签:“标签2”,颜色:#FF8080,数据:[[1,1],[2,2]]
];
//水平方向的反向数据
用于(数据系列){
var s=数据[系列];

对于(i=0;i来说,flot barnumbers似乎不支持堆叠条形图。这就是值标记不正确的原因。我建议使用jqBarGraph,它是实现堆叠条形图的jQuery插件


我希望它能有所帮助。

我最终决定使用它,因为它有更好的文档记录,而且运行良好!

我已经更新了flot barnumbers以支持堆叠条,请参阅更新的。如果您需要任何其他功能,请给我发电子邮件或打开一个问题,我只是碰巧看到了这个问题。

您能发布代码吗?抱歉,我刚刚添加了code、 谢谢!您可以在这里看到演示:第一个问题:如何设置数字格式?第二个问题:如何仅在鼠标悬停时显示这些值?谢谢