我正在尝试创建一个与其“图例”相比具有不同内部标签的图表。当图例太长时,Chart.js 会缩小,这会将我的图表推至非常小的尺寸。我把标签拿下来,到一定长度后把它们剪掉,这就是新标签。但是我不知道如何拥有两个单独的标签,一个是图例,一个是缩短版本,另一个是正常长度。这是我的代码:
function truncLabel(str, maxwidth){
if(str.length > maxwidth) {
str = str.substring(0,24)+"...";
}
return str;
}
for (var i = 0 ; i < labels2Length; i++){
trunc_labels2[i] = formatLabel(labels2[i],20);
}
new Chart(document.getElementById("xxx"), {
type: 'doughnut',
data: {
labels: trunc_labels2,
datasets: [
{
label: labels2,
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#5e5ba3","#9fe7aa","#1a5ba3","#6cba1f","#cacf4f"],
data:data2
}
]} //More code follows but isnt needed here
Labels2 正确返回完整字符串,而 trunc_labels2 正确返回 chop 的字符串。其他类型的图表有此功能(即条形图、折线图等),但 donut 似乎没有? 谢谢
最佳答案
要 chop 标签/字符串 - 使用 map()
方法以及 substring()
,例如:
let labels = [
'Lorem ipsum dolor sit amet',
'Lorem ipsum dolor sit amet',
'Lorem ipsum dolor sit amet'
];
let trunc_labels = labels.map(e => e.substring(0, 12) + '...');
现在,要在工具提示上显示原始标签,请使用以下工具提示的标签回调函数:
callbacks: {
label(t, d) {
let xLabel = labels[t.index],
yLabel = d.datasets[t.datasetIndex].data[t.index];
return xLabel + ': ' + yLabel;
}
}
* 确保labels
是全局变量。
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
let labels = [
'Lorem ipsum dolor sit amet',
'Lorem ipsum dolor sit amet',
'Lorem ipsum dolor sit amet'
];
let trunc_labels = labels.map(e => e.substring(0, 12) + '...');
let chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: trunc_labels,
datasets: [{
data: [1, 1, 1],
backgroundColor: [
'rgba(0, 119, 220, 0.8)',
'rgba(0, 119, 220, 0.6)',
'rgba(0, 119, 220, 0.4)'
]
}]
},
options: {
tooltips: {
callbacks: {
label(t, d) {
let xLabel = labels[t.index],
yLabel = d.datasets[t.datasetIndex].data[t.index];
return xLabel + ': ' + yLabel;
}
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
关于javascript - Chart.js 圆环图内部标签与外部标签不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45872381/