在chartjs的圆环图上隐藏label
[英]hide label on doughnut chart of chartjs
问题描述
提前感谢您的帮助。我正在使用chartjs的甜甜圈图。其中百分比值标签出现在图表上。有什么办法可以隐藏它。
var category_doughnut_datas = [80,5,5,10];
var category_doughnut__data = {
labels: ["Safe Zone", "Level 1","Level 2","Level 3"],
};
var category_doughnut_options = {
cutoutPercentage: 60,
legend: {
display: false,
position: "top",
paddingBottom: 16,
align: "start",
labels: {
fontColor: "#555555",
fontSize: 20,
boxWidth: 0,
},
},
tooltips: {
displayColors: false,
},
responsive: true,
};
var dough_ctx = document.getElementById("overallStatus").getContext("2d");
if (dough_ctx) {
var myDoughnutChart = new Chart(dough_ctx, {
type: "doughnut",
data: category_doughnut__data,
options: category_doughnut_options,
});
}
2 个解决方案
解决方案1
2 已采纳 2021-08-27 12:13:17
由于您没有在选项中指定任何选项以在图表上绘制它并且它不是默认的 chart.js 行为，我希望您在某处将其定义为默认值，在这种情况下，您可以在插件部分中的选项 object 中指定datalabels: false以停止它从渲染：
Chart.register(ChartDataLabels); Chart.defaults.plugins.datalabels.color = '#fff'; Chart.defaults.plugins.datalabels.formatter = (value, ctx) => { let sum = 0; let dataArr = ctx.chart.data.datasets[0].data; dataArr.map(data => { sum += data; }); let percentage = (value * 100 / sum).toFixed(2) + "%"; return percentage; }; const options = { type: 'doughnut', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }] }, options: { plugins: { datalabels: false // Removing this line shows the datalabels again } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script> </body>
解决方案2
0 2022-09-15 12:26:58
options.plugins.datalabels: false 应该提到。
没有它，默认情况下该值设置为 true。
使用chartjs在圆环图中标记问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.