javascript - 当条形尺寸小于标签文本时如何删除条形标签？

Question

目前正在使用 jqplot 中的堆栈条形图。当栏尺寸小于标签文本时，如何删除栏标签？

Fiddle Link

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

在上图中，最后一根柱线的值为 2%，显示在柱线外。如何在显示外部栏时删除这些类型的元素？

Answer 1

有一个特定的属性可以调整你需要的东西:

边缘公差

您可以使用它来设置标签和条边距之间的最小像素距离。 例如……

            pointLabels: {
                show: true, 
                stackedValue: true, 
                location: 'w', 
                hideZeros: true,
                edgeTolerance: 10
            }