Estoy haciendo un chart.js simple y me da un gráfico predeterminado sin mostrar ningún dato, y la leyenda no está definida.
Aquí está mi código:
var default_data = [ { "year":"Total", "gnis_id":"1009494", "geometry":"MULTIPOLYGON", "metadata":"NA", "number_of_records":1, "parkname":"NA", "region":"NT", "state":"NC", "unit_code":"BLRI", "unit_name":"Blue Ridge Parkway", "unit_type":"Parkway", "visitors":871922828}, { "year":"Total", "gnis_id":"255952", "geometry":"MULTIPOLYGON", "metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml", "number_of_records":1, "parkname":"Golden Gate", "region":"PW", "state":"CA", "unit_code":"GOGA", "unit_name":"Golden Gate National Recreation Area", "unit_type":"National Recreation Area", "visitors":611031225 } ]; var ctx = document.getElementById('chart2').getContext('2d'); var chart2 = new Chart(ctx, { type: 'bar', data: { datasets: [{ data: default_data, parsing: { xAxisKey: 'unit_name', yAxisKey: 'visitors' } }] }, options: { } });¿Alguien puede ver el problema aquí? No puedo encontrar ningún error ya que el código es bastante simple y todavía no muestra nada. Tampoco hay mensaje en la consola del navegador.
Busque el último Chart JS, parece que las versiones anteriores no lo admiten. Me funcionó bien con la última versión.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <body> <canvas id="myChart" ></canvas> <script> var default_data = [ { "year":"Total", "gnis_id":"1009494", "geometry":"MULTIPOLYGON", "metadata":"NA", "number_of_records":1, "parkname":"NA", "region":"NT", "state":"NC", "unit_code":"BLRI", "unit_name":"Blue Ridge Parkway", "unit_type":"Parkway", "visitors":871922828}, { "year":"Total", "gnis_id":"255952", "geometry":"MULTIPOLYGON", "metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml", "number_of_records":1, "parkname":"Golden Gate", "region":"PW", "state":"CA", "unit_code":"GOGA", "unit_name":"Golden Gate National Recreation Area", "unit_type":"National Recreation Area", "visitors":611031225 } ]; var ctx = document.getElementById('myChart').getContext('2d'); var chart2 = new Chart(ctx, { type: 'bar', data: { datasets: [{ data: default_data, backgroundColor:["red","green"], parsing: { xAxisKey: 'unit_name', yAxisKey: 'visitors' } }] }, options: { plugins:{ legend: {display: false} } } }); </script>