简体   繁体   English

如何在jqPlot堆叠条形图中放置标签?

[英]How do you position the labels in jqPlot stacked bar charts?

I can't figure out how to position the labels within the bar chart. 我不知道如何在条形图中放置标签。 Is there a way to centre them within it's respective bar when they are stacked? 当它们堆叠在一起时,是否可以将它们居中放置在其相应条中? In the picture below most of them seem to be reasonably in the middle except there is just one which sinks right to the bottom. 在下面的图片中,它们中的大多数似乎都在中间,只是只有一个向下沉。 I have no idea how to change this. 我不知道该如何更改。 I've tried adding a margin in the css but that seems to have no effect. 我试过在CSS中添加边距,但这似乎没有效果。 I've also tried playing with the x/ypadding in the pointLabel option but it only seems to move it across but not up or down. 我也尝试过在pointLabel选项中使用x / ypadding,但是它似乎只能将其移动而不是向上或向下移动。 jqPlot

var s1 = [31, 10, 20, 44],
                s2 = [15, 4, 7, 16],
                ticks = ['May', 'June', 'July', 'August'];

            $.jqplot('graph_pnl2', [s1, s2], {
                stackSeries: true,
                seriesColors:['#73C774', '#C7754C'],

                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: true},
                    pointLabels: { show: true, location: 'e', xpadding: 25, ypadding: 25},
                },

                legend: {
                    show: false,
                    placement: 'insideGrid'
                },
                axes: {

                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                    yaxis: {
                        pad: 0,
                        tickOptions: {formatString: '%d'}
                    }
                }
            });

you didn't notice that in the second stacked column there is only one value...(where is the 10 value column?) Ok. 您没有注意到在第二个堆叠列中只有一个值...(10值列在哪里?)好的。 It seems that you are using some property uncorrectly... I think that is "pad: 0" on yaxis property. 似乎您使用的属性不正确...我认为这是yaxis属性上的“ pad:0”。 Please delete it or comment it out. 请删除它或将其注释掉。

        yaxis: {
            //pad: 0,
            tickOptions: {formatString: '%d'}
        }

Here is the code on JSFiddle. 是JSFiddle上的代码。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM