0
144
Vistasocultar la etiqueta en el gráfico de anillos de chartjs
Gracias por la ayuda de antemano. Estoy usando el gráfico de donas de chartjs. En él, las etiquetas de valor porcentual aparecen en el gráfico. ¿Hay alguna forma de ocultarlo?
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, }); }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Dado que no especifica ninguna opción para dibujarlo en el gráfico en sus opciones y no es un comportamiento predeterminado de chart.js, espero que lo haya definido como predeterminado en algún lugar, en cuyo caso puede en su objeto de opciones en la sección de complementos especificar datalabels: false a impedir que se renderice:
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta