如何解决chart.js在带有工具提示回调的标签中的换行
在vue.js组件中使用chart.js,我正在使用嵌套数组在我的longs标签中换行。 由于我使用工具提示回调在标签的末尾添加了%,因此它们不再断行了。
Immunity
解决方法
您必须确保label
回调函数返回一个array
以使其按预期工作。可以这样写:
callbacks: {
label: function(tooltipItem,data) {
let i = tooltipItem['index'];
let label = data['labels'][i];
return label.slice(0,-1).concat(label.slice(-1) + ': ' + data['datasets'][0]['data'][i] + '%');
}
}
请查看下面的可运行代码,以了解其工作原理。这是普通的JavaScript,但是label
回调函数与Vue.js看起来一样。
new Chart('chart',{
type: 'doughnut',data: {
labels: [
['Lutte contre la corruption','active ou passive'],['Actions en faveur de la responsabilité','sociétale chez les fournisseurs']
],datasets: [{
backgroundColor: ['#0075AA','#258BB7'],data: [90,7]
}]
},options: {
responsive: true,maintainAspectRatio: false,legend: {
display: false
},animation: {
duration: 3000,easing: 'easeInOutQuad'
},tooltips: {
backgroundColor: 'rgba(231,30,116,.87)',callbacks: {
label: function(tooltipItem,data) {
let i = tooltipItem['index'];
let label = data['labels'][i];
return label.slice(0,-1).concat(label.slice(-1) + ': ' + data['datasets'][0]['data'][i] + '%');
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。