0
361
VistasLa posición de la leyenda no está verticalmente en el medio en el gráfico de anillos
En el gráfico de anillos, la posición de la leyenda es correcta, pero quiero agregar verticalmente en el medio con el círculo correspondiente.
Soy nuevo en chartjs y JavaScript. A continuación se muestra mi fragmento de código. Estoy tratando de cargar el gráfico circular/anular con leyendas, pero la posición no es correcta
// chart colors var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb']; var donutOptions = { cutoutPercentage: 65, responsive: true, legend: { position: 'right', padding: 2, labels: { pointStyle: 'circle', usePointStyle: true, } } }; // donut 1 var chDonutData1 = { labels: ['Product 1', 'Product 2', 'Product 3', 'Product 4'], datasets: [{ backgroundColor: colors.slice(0, 4), borderWidth: 2, data: [74, 11, 40, 20] }], }; var chDonut1 = document.getElementById("chDonut1"); if (chDonut1) { new Chart(chDonut1, { type: 'pie', data: chDonutData1, options: donutOptions }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> <div class=""> <canvas id="chDonut1"></canvas> </div> 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Actualizar a la última versión V2 (2.9.4) de chart.js resolverá su problema:
// chart colors var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb']; var donutOptions = { cutoutPercentage: 65, responsive: true, legend: { position: 'right', padding: 2, labels: { pointStyle: 'circle', usePointStyle: true, } } }; // donut 1 var chDonutData1 = { labels: ['Product 1', 'Product 2', 'Product 3', 'Product 4'], datasets: [{ backgroundColor: colors.slice(0, 4), borderWidth: 2, data: [74, 11, 40, 20] }], }; var chDonut1 = document.getElementById("chDonut1"); if (chDonut1) { new Chart(chDonut1, { type: 'pie', data: chDonutData1, options: donutOptions }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <div class=""> <canvas id="chDonut1"></canvas> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta