在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.