TextAlign点标签图表.js

Question

我一直在试验雷达图的多行点标签(超长标签(
创建多行点标签时，标签中的文本会根据雷达图的侧面向左/向右/居中对齐
我搜索并发现数据标签插件https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#multiline-labels支持textAlign，但没有如何应用它的示例
是否有办法将所有标签中的文本居中对齐？

var data = {
labels: [
["very", "long label"],
["very", "long label"],
["very", "long label"]
],
datasets: [{
label: [`dataset`],
backgroundColor: "rgba(38,120,255,0.2)",
borderColor: "rgba(38,120,255, 1)",
data: [90, 90, 90]
}]
};
var options = {
responsive: true,
tooltips: false,
title: {
text: 'Basic example',
display: true,
position: `bottom`,
},
scale: {
angleLines: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 100,
stepSize: 25, 
maxTicksLimit: 11,
display: false, 
}
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'radar',
data: data,
options: options
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js" integrity="sha512-Tfw6etYMUhL4RTki37niav99C6OHwMDB2iBT5S5piyHO+ltK2YX8Hjy9TXxhE1Gm/TmAV0uaykSpnHKFIAif/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="wrapper">
<canvas id="chart" width="500" height="450"></canvas>

Answer 1

没有定义点标签的文本对齐的选项，textAlign由radialLinear.js内的函数getTextAlignForAngle根据角度计算。

但是，您可以在使用插件核心API生成图表后覆盖textAlign。API提供了可用于执行自定义代码的不同挂钩。例如，afterLayout钩子可以如下使用。

afterLayout: chart => {
chart.getDatasetMeta(0).rScale._pointLabelItems.forEach(o => o.textAlign = 'center');      
}

请看一下下面修改后的代码，看看它是如何工作的。

var data = {
labels: [
["very", "long label"],
["very", "long label"],
["very", "long label"]
],
datasets: [{
label: ['dataset'],
backgroundColor: "rgba(38,120,255,0.2)",
borderColor: "rgba(38,120,255, 1)",
data: [90, 90, 90]
}]
};
var options = {
responsive: true,
tooltips: false,
plugins: {
title: {
text: 'Basic example',
position: 'bottom'
}
},
scales: {
r: {
min: 0,
max: 100,
ticks: {   
stepSize: 25
}
}
}
};
new Chart('chart', {
type: 'radar',
plugins: [{
afterLayout: chart => {
chart.getDatasetMeta(0).rScale._pointLabelItems.forEach(o => o.textAlign = 'center');      
}
}],
data: data,
options: options
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wrapper">
<canvas id="chart" width="500" height="450"></canvas>