我将Chart.JS与Chart.JS 数据标签插件一起使用。当甜甜圈切片大小足以容纳文本时,是否可以仅显示数据标签?
我有以下示例:
https://jsfiddle.net/7vg5w4mq/
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'doughnut',
options:{
plugins: {
datalabels: {
color: '#000000',
display: true,
formatter: function (value, ctx) {
return value + " kWh";
}
}
},
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
},
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
});
我知道,这个例子没有任何意义,但你可以看到问题所在。
如果有很多数据,数据标签会像这样溢出甜甜圈切片大小:
是否可以选择告诉 Chart.JS 仅在文本适合甜甜圈时显示这些标签?(否则只显示工具提示)。
仅检查值百分比的选项不起作用,因为图表本身(或浏览器窗口的大小)可以调整为非常小的大小(并且百分比将不再适合)。
注意:这与Chart.JS不是同一个问题:当条形宽度对于文本来说足够大时,我怎样才能只显示数据标签?因为在那里我要求同样的事情,但是要一个条形图!
我现在结合使用两个想法:
下面的例子展示了这个想法:
formatter: function(value) {
let percentage = (value.toFixed(2) / sum) * 100;
if (percentage > 100) {
percentage = 100;
}
if (percentage < 10) {
return "";
}
if (ctx.width <= 200) {
return "";
}
return value + " kWh";
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句