我想要一个甜甜圈图,但是问题是我找不到那里的JS / Jquery库可以给我想要的结果。
我尝试了ChartJS,但显然,它不允许HTML标记,也不允许标签中的换行符。并且即使我设法添加,标签也似乎是Chart.js图表图例的原因,因此,如果我在标签中附加太多字符串,则图例将被“破坏”。我只想在标签中显示更多信息。
var config1 = {
type: 'doughnut',
data : {
labels: [
"Pass<br/>" +
"Move Test: 1<br/>" +
"Increment Test: 2<br/>" +
"Rewrite Test: 19",
"Fail",
],
datasets: [
{
data: data: [22, 4],
backgroundColor: [
"#1AFF00",
"#FF0A0A",
],
hoverBackgroundColor: [
"#20FF08",
"#FF0000",
]
}]
},
options : {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'All entries that Passed vs Fail from different tests'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
你们知道我可以使用其他任何库吗?或者,如果我可以在Chart.js上做一些花招?
谢谢!
您可以通过提供标签回调(在选项中)来将标签与图例分开,并且可以通过传递字符串数组来使工具提示标签成为多行(根据文档)。
var ctx = document.getElementById("canvas");
var data = {
type: 'doughnut',
data: {
labels: [
"Pass",
"Fail",
],
datasets: [
{
data: [22, 4],
backgroundColor: [
"#1AFF00",
"#FF0A0A",
],
hoverBackgroundColor: [
"#20FF08",
"#FF0000",
]
}]
},
options : {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'All entries that Passed vs Fail from different tests'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
if(data.labels[tooltipItems.index] == 'Pass') {
return ['Pass','Move Test: 1','Increment Test: 2','Rewrite Test: 19'];
}
return data.labels[tooltipItems.index];
}
}
}
}
};
var theChart = new Chart(ctx, data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="150"></canvas>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句