我想在堆栈条形图上显示所有堆栈标签
我使用以下属性:
yAxis: {
reversedStacks: false,
min: 0,
stackLabels: {
endOnTick: this.reportData.showChartOnly ? false : true,
enabled: true,
allowOverlap: true,
// overflow: 'none',
crop: false,
useHTML: true,
inside: false,
// overflow: 'allow',
style: {
fontWeight: 'normal',
color: "#312e2e",
fontFamily: 'Lato',
},
x: 8,
y: -2,
formatter: function () {
let convertedValue = this.total != null && this.total != 0 ? parent.reportUtilService.convertUnit(this.total, parent.unit) : { data: this.total, unit: parent.unit };
let value = parent.reportData.viewDef.showDecimalValue ? convertedValue.data : Highcharts.numberFormat(this.total, 0)
return value + " " + convertedValue.unit;
},
},
但是有些值重叠在条上
这是同样的问题。我用以下选项解决了它,
stackLabels: {
enabled: true,
crop: false,
overflow: 'allow',
}
现在,标签出现在条形外部而不与其重叠。
/**
* (Highcharts) How to handle stack total labels that flow outside the plot
* area. The default is set to `"justify"`, which aligns them inside the
* plot area. For columns and bars, this means it will be moved inside the
* bar. To display stack labels outside the plot area, set `crop` to `false`
* and `overflow` to `"allow"`.
*/