gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:08:18 26 4
gpt4 key购买 nike

目前正在使用 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
});
});

enter image description here

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

最佳答案

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

边缘公差

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

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

关于javascript - 当条形尺寸小于标签文本时如何删除条形标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20968001/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com