Estoy tratando de crear un gráfico de anillos con objetos personalizados como datos. No sé si es un error o soy tonto. 😩 Si el tipo de gráfico es "barra", todo funciona como se esperaba, pero si lo cambio a dona, el área del gráfico está vacía.
Aquí está el código para el gráfico de barras:
var myChart = new Chart(ctx, { type: 'bar', data: { datasets: [{ label: '# of Votes', data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}], parsing:{ yAxisKey:'vX', xAxisKey: 'n' }, borderWidth: 1 }] }, options: { } });y esa es mi dona:
var myChart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ label: '# of Votes', data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}], parsing:{ yAxisKey:'vX', }, borderWidth: 1 }] }, options: { } });¿El análisis no es compatible con los gráficos de anillos? No puedo encontrar información sobre esto en los documentos.
gracias cristian
Con respecto a las estructuras de datos , la documentación de Chart.js dice:
Para un gráfico circular (y de anillos), los conjuntos de datos deben contener una matriz de puntos de datos. Los puntos de datos deben ser un número (...)
Por lo tanto, el análisis no tiene sentido y probablemente no sea compatible. El problema se puede resolver asignando sus datos a labels y data de la siguiente manera.
var data = [{vX:12, n:'vx'}, {vX:13, n:'vx2'}]; new Chart('myChart', { type: 'doughnut', data: { labels: data.map(v => vn), datasets: [{ label: '# of Votes', data: data.map(v => v.vX), borderWidth: 1 }] } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <canvas id="myChart"></canvas>Por el momento, chart.js no admite la notación de objetos con el análisis de gráficos circulares/de anillos.
Hubo un pr para esto hace unos días que se fusionó con el maestro, por lo que tan pronto como se publique una nueva versión de chart.js, cualquier cosa más allá de la versión 3.5.1 tendrá este cambio y luego podrá usar su objeto.
De lo contrario, puede tomar la ruta sugerida por @uminder y mapear los datos usted mismo.