动态js图表显示问题

Question

图表中的数据未显示。标签 - 好的，数据 - 没有）

HTML 中只有 chart.js 和 canvas 初始化的链接 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>

JS 代码分为两部分：第一部分 - 创建数据供将来在图表中使用，第二部分 - 图表创建。 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
     }]
}
    }
});

貌似有点小错误，但是找不到了

Answer 1

试一试：

index.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>

动态js图表显示问题

Dynamic js chart display problems

javascript

chart.js