我有一个条形图，总值通常重叠在上面，如下所示。
我尝试减少图形的面积、宽度和高度，这个问题得到解决，但对于其他一些值再次出现，是否有任何永久的解决方案来避免重叠？
请查找下面的代码
$('#' + divid).highcharts({
chart: {
type: chart_type == 'bar_simple' || chart_type == 'bar' ? 'bar' : 'column',
margin: 75,
marginBottom: $('.hidSelectedOA').val() == '0' ? '110' : '60',
marginLeft: marginLeftOfGraph,
marginTop: marginTopOfGraph
},
title: {
text: graphName
},
xAxis: {
categories: category_name,
labels: {
formatter: function () {
var text = this.value,
formatted = text.length > 20 ? text.substring(0, 20) + '...' : text;
return '<div>' + formatted + '</div>';
},
style: {
width: '150px'
},
useHTML: true
}
},
yAxis: {
title: {
text: '',
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
}
},
legend: {
verticalAlign: 'bottom',
itemStyle: {
font: '12px Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0',
},
enabled: true,
//backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
//borderColor: '#CCC',
itemMarginTop: 15
//borderWidth: 1,
//shadow: false
}, credits: {
enabled: false
},
exporting: { enabled: divid == 'myModalInnerHtml' ? true : false },
colors: colors
,
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: ' + cur + '{point.y:,' + format + '}'
},
plotOptions: {
column: {
stacking: chart_type == 'bar_simple_column' ? '' : 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
format: '{point.y:,' + format + '}'
}
},
series: {
stacking: chart_type == 'bar_simple_column' ? '' : 'normal',
},
line: {
dataLabels: {
enabled: true,
format: '{point.y:,.2f}'
},
enableMouseTracking: false
}
},
series: JSON.parse(data.d),
});
最佳答案
假设您指的是 dataLabel 位置，您所看到的是，当列外部没有分配足够的空间时，标签被移动到列内部。
这受到轴极值、轴 maxPadding 和各种数据标签属性的影响。
为了确保它们始终显示在列外，您可以将 crop、overflow 和 inside 设置添加到数据中标签选项:
plotOptions: {
column: {
dataLabels: {
enabled: true,
inside: false,
crop: false,
overflow: 'none'
}
}
}
请记住，这可能会导致标签被图表标题或图表顶部的其他元素切断或重叠的问题。
您需要确保标题和图表之间留有足够的空间，以防标签被推到绘图区域上方。
fiddle :
引用:
关于javascript - 总值(value)数字经常与 Highcharts 条形图中的条形重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41441528/