如何将栏上显示的值向下移动？ [英] How to move the values displayed on the bar to down to it?

问题描述

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

Currently working with stack bar chart in jqplot. My doubt is how to move the value displayed on the bar to down of its bar?

小提琴在这里

$(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
            });
});

推荐答案

这里是解决方案： Jsfiddle链接

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

just add css class with name of the parent element of the graph div element and the jqplot-point-label class mix. Look at the jsfiddle as it would make more sense there

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

这篇关于如何将栏上显示的值向下移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！