0
268
VistasVue Chart.js Gráfico de anillos con arcos redondeados y espaciados (vue3-chart-v2)
¿Alguien sabe cómo puedo lograr el efecto de arcos redondeados con espacios en un Chart.js Donut Chart como este?
Ya intenté lograr esto cambiando (upload://q49XACiQjrYvE0H2nZUWZaLcq6G.png) las propiedades "borderRadius" y "offset" en las propiedades del conjunto de datos y el espaciado del arco, pero eso no ayudó.
Estoy usando 'vue3-chart-v2' en mi aplicación Vue 3.
Mi código:
import { defineComponent } from 'vue'; import { Doughnut } from 'vue3-chart-v2'; export default defineComponent({ name: 'PieChart', extends: Doughnut, props: { carbonData: Object }, data() { return { chartData: { labels: ['A', 'B', 'C', 'D'], datasets: [ { data: [ this.carbonData.slabs, this.carbonData.columns, this.carbonData.foundation, this.carbonData.core ], backgroundColor: ['rgba(143, 188, 143, 0.7)', 'rgba(135, 206, 250, 0.7)', 'rgba(205, 133,63, 0.7)', 'rgba(230, 78, 62, 0.7)'], offset: 1, weight: 1, borderWidth: 1, borderRadius: 15 } ] }, options: { elements: { arc: { spacing: 15 } }, cutoutPercentage: 70, responsive: true, maintainAspectRatio: false, legend: { position: 'right', } } } }, mounted () { this.renderPieChart(); }, methods: { renderPieChart() { this.renderChart(this.chartData, this.options); } }, })
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Lo único que puedo pensar es que está utilizando chart.js V3.0.0. Porque se introdujo borderRadius para los arcos y el espaciado no funcionó hasta V3.4.0. Entonces, si usa chart.js V3.4.0 o posterior, debería funcionar bien:
var 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: { cutout: '90%', radius: '90%', plugins: { legend: { display: false } }, elements: { arc: { spacing: 50, borderRadius: 15 } } } } var 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.4.0/chart.js"></script> </body>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta