你如何在 jqPlot 堆积条形图中定位标签？答案

【问题标题】：How do you position the labels in jqPlot stacked bar charts?你如何在 jqPlot 堆积条形图中定位标签？
【发布时间】：2018-07-28 16:56:12
【问题描述】：

我不知道如何在条形图中定位标签。当它们堆叠时，有没有办法将它们集中在各自的栏中？在下面的图片中，它们中的大多数似乎合理地位于中间，除了只有一个沉到底部。我不知道如何改变这一点。我尝试在 CSS 中添加边距，但这似乎没有效果。我也尝试过在 pointLabel 选项中使用 x/ypadding ，但它似乎只是将它移动而不是向上或向下移动。

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

【问题讨论】：

您能否为您的示例准备一个 jsfiddle，说明您如何获得如屏幕图所示的图表...因为当我运行您的代码时，我看不到与您的屏幕图相同的标签。

标签： jquery css jqplot

【解决方案1】：

您没有注意到在第二个堆叠列中只有一个值...（10 值列在哪里？）好的。看来您正在错误地使用某些属性... 我认为这是 yaxis 属性上的“pad：0”。请删除或注释掉。

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

Here 是 JSFiddle 上的代码。

【讨论】：