在chartjs的圆环图上隐藏label
[英]hide label on doughnut chart of chartjs
问题描述
Thanks for the help in advance.I am using doughnut graph of chartjs.In it the percentage value labels are coming on the graph.Is there any way i can hide it.
提前感谢您的帮助。我正在使用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
Since you dont specify any options to draw it on the chart in your options and its not default chart.js behaviour I expect you defined it as defaults somewhere, in which case you can in your options object in the plugins section specify datalabels: false to stop it from rendering:由于您没有在选项中指定任何选项以在图表上绘制它并且它不是默认的 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 should be mentioned. options.plugins.datalabels: false 应该提到。
Without it, the value is set to be true by default.没有它，默认情况下该值设置为 true。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.