Gegevenslabels buiten een kolom of staaf in plaats van er binnen
Met behulp van onderstaand script is het mogelijk om de gegevenslabels buiten kolommen/staven te laten vallen in plaats van er in:
Voorbeeld
Voor
Na
Gebruikt dit script voor kolomdiagrammen:
const labelHeight = 25
widget.on('domready', function(widget) {
try {
console.log('DOM Ready script starting (wid=' + widget.oid + ')');
// Get plot height
plotHeight = parseInt(widget.chart[0].getElementsByClassName('highcharts-plot-border')[0].getAttribute('height'));
if (plotHeight < labelHeight * 3) return;
// Find Highest column
maxColumnHeight = -1;
widget.chart[0].getElementsByClassName('highcharts-series','highcharts-column-series').forEach(column => {
column.childNodes.forEach(rect => {
if (parseInt(rect.getAttribute('height')) > maxColumnHeight)
maxColumnHeight = parseInt(rect.getAttribute('height'))
})
})
if (maxColumnHeight == -1) return;
// Check if we require adjustment
if (plotHeight - maxColumnHeight > labelHeight) return;
ratio = (maxColumnHeight - labelHeight) / maxColumnHeight;
// Adjust Column height and location
columnsArray = widget.chart[0].getElementsByClassName('highcharts-series','highcharts-column-series');
labelsArray = widget.chart[0].getElementsByClassName('highcharts-data-labels');
for (let seriesNum = 0; seriesNum < columnsArray.length; seriesNum++) {
for (let columnNum = 0; columnNum < columnsArray[seriesNum].childNodes.length; columnNum++) {
currentHeight = parseInt(columnsArray[seriesNum].childNodes[columnNum].getAttribute('height'));
currentY = parseInt(columnsArray[seriesNum].childNodes[columnNum].getAttribute('y'));
transformLabel = labelsArray[seriesNum].childNodes[columnNum].getAttribute('transform')
// Calculate offset
offset = Math.round(currentHeight * (1-ratio))
// Adjust columns
columnsArray[seriesNum].childNodes[columnNum].setAttribute('height',currentHeight-offset)
columnsArray[seriesNum].childNodes[columnNum].setAttribute('y',currentY+offset)
// Adjust labels
newLabel = transformLabel.split(',')[0] + ',' + (currentY+offset-labelHeight) + ')';
labelsArray[seriesNum].childNodes[columnNum].setAttribute('transform',newLabel)
}
}
}
catch (error) {
console.error(error);
}
finally {
console.log('DOM Ready script complete (wid=' + widget.oid + ')');
}
});
Gebruik dit script voor staafdiagrammen:
const labelWidth = 25 + 5 // 5 is the space between the label and the bar
widget.on('domready', function(widget) {
try {
console.log('DOM Ready script starting (wid=' + widget.oid + ')');
// Get plot width
plotWidth = parseInt(widget.chart[0].getElementsByClassName('highcharts-plot-border')[0].getAttribute('width'));
// Find Widest bar
maxBarWidth = -1;
widget.chart[0].getElementsByClassName('highcharts-series','highcharts-bar-series').forEach(bar => {
bar.childNodes.forEach(rect => {
if (parseInt(rect.getAttribute('height')) > maxBarWidth)
maxBarWidth = parseInt(rect.getAttribute('height'))
})
})
if (maxBarWidth == -1) return;
// Check if we require adjustment
if (plotWidth - maxBarWidth > labelWidth) return;
ratio = (maxBarWidth - labelWidth) / maxBarWidth;
// Adjust Bar height and location
barsArray = widget.chart[0].getElementsByClassName('highcharts-series','highcharts-bar-series');
labelsArray = widget.chart[0].getElementsByClassName('highcharts-data-labels');
for (let seriesNum = 0; seriesNum < barsArray.length; seriesNum++) {
for (let barNum = 0; barNum < barsArray[seriesNum].childNodes.length; barNum++) {
currentWidth = parseInt(barsArray[seriesNum].childNodes[barNum].getAttribute('height'));
currentY = parseInt(barsArray[seriesNum].childNodes[barNum].getAttribute('y'));
transformLabel = labelsArray[seriesNum].childNodes[barNum].getAttribute('transform')
// Calculate offset
offset = Math.round(currentWidth * (1-ratio))
// Adjust bars
barsArray[seriesNum].childNodes[barNum].setAttribute('height',currentWidth-offset)
barsArray[seriesNum].childNodes[barNum].setAttribute('y',currentY+offset)
// Adjust labels
newLabel = 'translate(' + (currentWidth - offset) + ',' + transformLabel.split(',')[1]
labelsArray[seriesNum].childNodes[barNum].setAttribute('transform',newLabel)
}
}
}
catch (error) {
console.error(error);
}
finally {
console.log('DOM Ready script complete (wid=' + widget.oid + ')');
}
});