Los datos del gráfico no se muestran. Etiquetas - ok, datos - nada)
Solo hay enlaces para chart.js e inicialización de lienzo en HTML HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> --> <title>Title</title> </head> <body> <h2>text</h2> <canvas id="bar-chart-horizontal" width="800" height="450"></canvas> </body> <script src="/Users/***/Documents/django_website/js.js"></script> </html>El código JS se dividió en dos partes: la primera: creación de datos para uso futuro en el gráfico, la segunda: creación de gráficos. JS
var lineChartData = { labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"], datasets: [] }, array = ["[0,0,36,0,0,0,0,0]", "[20,60,15,9,2,3,39,364]"]; function getDataset(index, data) { return { datasets: [{ backgroundColor: ["#c45850", "#3cba9f","#8e5ea2","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9"], data: data }] }; } array.forEach(function (a, i) { lineChartData.datasets.push(getDataset(i, JSON.parse(a))); }); // ----------------------------------------------------------------------------- new Chart(document.getElementById("bar-chart-horizontal"), { type: 'horizontalBar', data: { labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"], lineChartData }, options: { legend: { display: false }, title: { display: true, text: '' }, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } } });Parece que hay un pequeño error, pero no puedo encontrarlo.
Dale una oportunidad a esto:
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <title>Title</title> </head> <body> <h2>text</h2> <canvas id="bar-chart-horizontal" width="1100" height="400"></canvas> </body> <script> const labels = [ "Australia", "China", "USA", "New Zealand", "Sweden", "Norway", "Finland", "Netherlands", ]; const backgroundColor = [ "#c45850", "#3cba9f", "#8e5ea2", "#e8c3b9", "#e8c3b9", "#e8c3b9", "#e8c3b9", "#e8c3b9", ]; const chartPlots = [ [0, 0, 36, 0, 0, 0, 0, 0], [20, 60, 15, 9, 2, 3, 39, 364], ]; const datasets = chartPlots.map((data, index) => ({ data, backgroundColor, })); const data = { labels, datasets, }; const options = { legend: { display: false }, title: { display: true, text: "Chart Title", }, scales: { xAxes: [ { stacked: true, }, ], yAxes: [ { stacked: true, }, ], }, }; const chartConfig = { type: "horizontalBar", data: data, options, }; new Chart(document.getElementById("bar-chart-horizontal"), chartConfig); </script> </html>