允许在标签中使用HTML标签的甜甜圈图JS / Jquery？
vil
我想要一个甜甜圈图，但是问题是我找不到那里的JS / Jquery库可以给我想要的结果。
我尝试了ChartJS，但显然，它不允许HTML标记，也不允许标签中的换行符。并且即使我设法添加，标签也似乎是Chart.js图表图例的原因，因此，如果我在标签中附加太多字符串，则图例将被“破坏”。我只想在标签中显示更多信息。
不解析HTML标签： 
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] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用jqplot将数据标签放置在带有线的甜甜圈图之外？
- 2
Highcharts甜甜圈标签溢出容器
- 3
D3甜甜圈图表图例或悬停标签
- 4
如何使用简单的html，javascript或jquery在Google提供的甜甜圈图中放入文本
- 5
Telerik甜甜圈图-自定义标签
- 6
如何在Chart.js中的甜甜圈图上显示标签
- 7
更改c3js中的甜甜圈图标签
- 8
使用jquery json对象使用highchart创建甜甜圈图
- 9
d3.js：如何在甜甜圈图中的标签下方添加值
- 10
显示标签时，防污甜甜圈图消失
- 11
如何在配置中控制HightChart饼图/甜甜圈图标签的font-weight
- 12
ggplot甜甜圈图百分比标签
- 13
将值标签（而非百分比）添加到甜甜圈图-Matplotlib
- 14
从PrimeReact更改甜甜圈图的标签位置
- 15
HTML / JS画布甜甜圈图如何使用ovlerap创建圆笔画？
- 16
更改标签在甜甜圈图中的位置
- 17
如何在Chart.js甜甜圈图上显示第二组标签？
- 18
通过chart.js在多系列甜甜圈图中添加标签
- 19
在jQuery中使用erb标签？
- 20
d3饼图/甜甜圈图中的标签过渡
- 21
在jQuery中使用Rails html标签
- 22
Highcharts甜甜圈标签溢出容器
- 23
D3.js甜甜圈图标签获取多边形而不是折线
- 24
带有弯曲标签的d3甜甜圈图
- 25
莫里斯甜甜圈图。标签长而小
- 26
d3.js甜甜圈图，外面有甜甜圈图例
- 27
允许在标签中使用HTML标签的甜甜圈图JS / Jquery？
- 28
隐藏甜甜圈图 r 中的标签
- 29
Chart.JS：当甜甜圈大小足以容纳文本时，如何仅显示数据标签？
我来说两句