Revisé los tutoriales proporcionados en la documentación de Chart.js, pero tengo dificultades para descubrir cómo hacer que los datos que tengo se ajusten a los requisitos de la biblioteca.
mi código es como tal
const labels = [ '1980', '1981', '1982' ] const dat = [ {"1980":{"legal":{"departments":1, "Foreign Agency":3, Corporation:3}}, "1981":{"legal":{"departments":2, "Foreign Agency":2, Corporation:5}}, "1982":{"legal":{"departments":3, "Foreign Agency":1, Corporation:8}} } ]; const data1 = { labels: labels, datasets: [{ label: 'Department number', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: dat, parsing: { yAxisKey: dat[0][1980]["legal"][" departments"] } }] }; const config1 = { type: 'bar', data: data1, options: { plugins: { title: { display: true, text: 'Stacked Bar Chart of legal entities 1980-1982' }, }, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } } } }; const myChart1 = new Chart( document.getElementById('myChart1'), config1 ); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script> <canvas id="myChart1" ></canvas>En realidad, los datos son significativamente más largos, pero toman esta forma general. También tengo control sobre cómo se generan los datos.
Además del hecho de que no aparece nada en el gráfico (no se generan errores), mi otro problema es que especificar el año y la clase de datos legales que se muestran no es realmente un enfoque práctico en primer lugar. Las etiquetas, por supuesto, deberían generarse idealmente a partir de los datos, ya que simplemente están ahí.
El resultado previsto sería un gráfico de barras apiladas con valores para cada una de las clases legales representadas para cada uno de los años.
Si desea utilizar la notación de objetos, también debe proporcionar la etiqueta x correcta a chart.js. Además, no puede usar una clave dinámica, sus datos deben estar en la misma clave.
const dat = { "1980": { "legal": { "departments": 1, "Foreign Agency": 3, Corporation: 3 }, x: "1980" }, "1981": { "legal": { "departments": 2, "Foreign Agency": 2, Corporation: 5 }, x: "1981" }, "1982": { "legal": { "departments": 3, "Foreign Agency": 1, Corporation: 8 }, x: "1982" } }; const data1 = { datasets: [{ label: 'Department number', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: Object.values(dat), parsing: { yAxisKey: 'legal.departments' } }] }; const config1 = { type: 'bar', data: data1, options: { plugins: { title: { display: true, text: 'Stacked Bar Chart of legal entities 1980-1982' }, }, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } } } }; const myChart1 = new Chart( document.getElementById('myChart1'), config1 ); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <canvas id="myChart1"></canvas>También puede asignar todos los datos a una sola matriz de antemano y proporcionar eso:
const labels = [ '1980', '1981', '1982' ] const dat = { "1980": { "legal": { "departments": 1, "Foreign Agency": 3, Corporation: 3 }, x: "1980" }, "1981": { "legal": { "departments": 2, "Foreign Agency": 2, Corporation: 5 }, x: "1981" }, "1982": { "legal": { "departments": 3, "Foreign Agency": 1, Corporation: 8 }, x: "1982" } }; const values = Object.values(dat).map(e => (e.legal.departments)) const data1 = { labels: labels, datasets: [{ label: 'Department number', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: values }] }; const config1 = { type: 'bar', data: data1, options: { plugins: { title: { display: true, text: 'Stacked Bar Chart of legal entities 1980-1982' }, }, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } } } }; const myChart1 = new Chart( document.getElementById('myChart1'), config1 ); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <canvas id="myChart1"></canvas>