Estoy tratando de analizar un gráfico circular de un objeto json que obtengo llamando a una API. Quiero usar un par clave-valor específico para representar el gráfico circular en sí.
Luego quiero usar algunos otros resultados clave-valor en mi información sobre herramientas.
Imagine el siguiente escenario que funciona hasta ahora.
const labels = [ 'Januar', 'Februar' ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: ["#0074D9", "#FF4136"], data: [req('url').current_price.eur, req('url').current_price.eur], }] const config = { type: 'pie', data: data, options: { responsive: true, plugins: { tooltip: { enabled: true, usePointStyle: true, callbacks: { title: function(tooltipItem, data) { console.log(tooltipItem); return "Index " + tooltipItem[0].label; }, label: (context) => { console.log('context', context); return 'test' } }, }, }, }, }; const myChart = new Chart( document.getElementById('myChart'), config ); <html> <meta charset="UTF-8"> <div> <canvas id="myChart"></canvas> </div> </html> Entonces, lo que estoy intentando es llamar a la API en data sin las claves, para poder acceder al objeto en context y usar algunos de estos valores en mi etiqueta, por ejemplo.
Encontré el
parsing: { yAxisKey: 'current_price.eur' } config pero esto no funciona para mí si cambio todo de acuerdo con mi idea, para que represente los valores de current_price.eur
Para los gráficos circulares/de anillos, debe especificar la opción key , ya que no utiliza ningún eje. Entonces, si hace que su objeto sea como (junto con la última versión, 3.6.0), esto debería funcionar:
parsing: { key: 'current_price.eur' }Ejemplo de gráfico circular de objetos:
var options = { type: 'doughnut', data: { datasets: [{ label: '# of Votes', data: [{ id: 'parent1', key: 55 }, { id: 'parent2', key: 55 }, { id: 'paren3', key: 30 }], }, { label: '# of Points', data: [{ id: 'child1', key: 55 }, { id: 'child2', key: 55 }, { id: 'child3', key: 30 }, { id: 'child4', key: 55 }, { id: 'child5', key: 55 }, { id: 'child6', key: 30 }], } ] }, options: { plugins: { tooltip: { callbacks: { label: (ttItem) => (`${ttItem.raw.id}: ${ttItem.raw.key}`) } } }, parsing: { key: 'key' } } } 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.6.0/chart.js"></script> </body>