Chart.js 正在剪切的饼车的ChartJS工具提示标签
我试图在我的图表中添加工具提示,但是其中一些标签正在被剪切 这是我的密码Chart.js 正在剪切的饼车的ChartJS工具提示标签,chart.js,Chart.js,我试图在我的图表中添加工具提示,但是其中一些标签正在被剪切 这是我的密码 var myPieChart = new Chart(ctx, { type: 'pie', data: data, options: { title: { display: true, text: title, fontSize: 36
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
title: {
display: true,
text: title,
fontSize: 36
},
tooltips: {
bodyFontSize: 22,
callbacks: {
label: function (tooltipItem, data) {
var number = data.datasets[0].data[tooltipItem.index];
var label = data.labels[tooltipItem.index];
var sum = data.datasets[0].data.reduce(function (a, b) { return a + b; }, 0);
var percentage = getPercent(number, sum);
return label + " " + Math.round(percentage) + " %";
}
}
}
}
有人能帮我正确渲染标签吗?非常感谢
关于我想说,你的工具提示已经脱离了画布的边缘,看看吧。或者参见最后的示例代码 或者,在没有看到完整代码的情况下,我可能会假设您的2014年图表与2015年图表重叠。可能在CSS中使用z索引修复,但在其他图表中可能会出现相反的效果 来自JSFIDLE的相同代码:
<div style='width: 300px;'>
<canvas id='chart'></canvas>
</div>
var ctx = document.getElementById('chart');
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["I am a really really really really really really really really really really really reallyreally really really really really really long label so long I might go off the chart"],
datasets: [{
data: [5],
}]
},
options: {
legend: {
display: false
},
maintainAspectRatio: false,
title: {
display: false,
fontSize: 16
}
}
});
var ctx=document.getElementById('chart');
var图表=新图表(ctx{
键入“pie”,
数据:{
标签:[“我真的真的真的真的真的真的真的真的真的真的真的很长的标签这么长我可能会离开图表”],
数据集:[{
数据:[5],
}]
},
选项:{
图例:{
显示:假
},
MaintaintAspectRatio:false,
标题:{
显示:假,
字体大小:16
}
}
});