html - 如何将栏上显示的值向下移动呢？

Question

目前在 jqplot 中使用堆栈条形图。我的疑问是如何将栏上显示的值移动到其栏的下方？

fiddle avail at here

$(document).ready(function(){
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"];
var legendValues = ["series1", "series2", "series3", "series4"];
var pLabels1 = ['70%','38%','71%','28%'];
var pLabels2 = ['27%','49%','27%','44%'];
var pLabels3 = ['2%','10%','2%','17%'];
var pLabels4 = ['1%','4%','1%','12%'];
var group4 = [52,528,129,264];
var group3 = [94,1388,394,401];
var group2 = [1446,7130,5591,1004];
var group1 = [3772,5512,14957,633];
    var series = [
                        { pointLabels: { labels: pLabels4 }},
                        { pointLabels: { labels: pLabels3 }},
                        { pointLabels: { labels: pLabels2 }},
                        { pointLabels: { labels: pLabels1 } }];
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], {
                stackSeries: true,
                seriesDefaults: {
                    shadow: false,
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true},
                    pointLabels: {
                        show: true, stackedValue: true, location: 'w', hideZeros: true
                    }
                },
                axes: {
                     xaxis: {
                        tickOptions: {
                            show: true,
                            mark: 'cross',
                            formatString: "%'d",
                            showGridline: true
                        },
                        min: null,
                        max: null,
                        showTickMarks: true
                    },
                    yaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: yAxisLabels
                    }
                },
                grid: {
                    gridLineColor: '#ffffff', /**/
                    borderColor: '#509790',
                    shadowWidth: 0,
                    borderWidth: 0,
                    background: 'rgba(0,0,0,0)',
                    shadow: false
                },              
                series: series
            });
});

Answer 1

这是解决方案:Jsfiddle link

只需添加带有图形 div 元素父元素名称的 css 类和 jqplot-point-label 类混合。看看 jsfiddle，因为它在那里更有意义

.chart .jqplot-point-label {
    margin-top:50px;
}