显示栏内的值 – jQuery图水平堆积条形图

发布时间:2020-07-30 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了显示栏内的值 – jQuery图水平堆积条形图脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在flot条形图上显示栏内的值(水平和堆叠),如下所示:

|-------------------------------------------
|                 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",1],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'],'Category 2']]},};

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

解决方法

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

总结

以上是脚本之家为你收集整理的显示栏内的值 – jQuery图水平堆积条形图全部内容,希望文章能够帮你解决显示栏内的值 – jQuery图水平堆积条形图所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!