Chart.js - 多个条形图 - 仅显示最后一个图表

Question

Chart.js - 多个条形图 - 仅显示最后一个图表。基本上数据来自 django 并在模板中呈现。数据是正确的，但只有 2 个图表中的一个正在呈现。 我也尝试过更改 ctx 但它没有用

HTML 代码

<div class="container">
  <div id="container" class="col-6">
    <canvas id="indiacanvas"></canvas>
  </div>
<div id="container" class="col-6">
    <canvas id="usacanvas"></canvas>
  </div>
</div>

基本上数据来自 django 并在模板中呈现。数据是正确的，但只有 2 个图表中的一个正在呈现。 我也尝试过更改 ctx 但它没有用

Script.js

//BAR CHART USD
    var barChartData = {
      labels: [{% for item in listyear1 %}'{{item| date:"Y"}}', {% endfor %}],
    datasets: [
      {
        label: "Total amount",
        backgroundColor: "lightblue",
        borderColor: "blue",
        borderWidth: 1,
        data: [{% for inr in USATOTAL %}'{{inr}}', {% endfor %}],
        },
    {
      label: "Amount Recieved",
      backgroundColor: "lightgreen",
      borderColor: "green",
      borderWidth: 1,
      data: [{% for rinr in RUSDS %} '{{rinr}}', {% endfor %}],
        },
    {
      label: "Amount Left",
        backgroundColor: "pink",
          borderColor: "red",
            borderWidth: 1,
              data: [{% for linr in LUSDS %} '{{linr}}', {% endfor %}],
        },
      ],
    };
    var chartOptions = {
      responsive: true,
      legend: {
        position: "top",
      },
      title: {
        display: true,
        text: "YearWise Summary USD",
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    };

    window.onload = function () {
      var ctx = document.getElementById("usacanvas").getContext("2d");
      window.myBar = new Chart(ctx, {
        type: "bar",
        data: barChartData,
        options: chartOptions,
      });
    };

// Bar Chart India
var barChartData = {
      labels: [{% for item in listyear %}'{{item| date:"Y"}}', {% endfor %}],
    datasets: [
      {
        label: "Total amount",
        backgroundColor: "lightblue",
        borderColor: "blue",
        borderWidth: 1,
        data: [{% for inr in INDIATOTAL %}'{{inr}}', {% endfor %}],
        },
    {
      label: "Amount Recieved",
        backgroundColor: "lightgreen",
          borderColor: "green",
            borderWidth: 1,
              data: [{% for rinr in RINR %} '{{rinr}}', {% endfor %}],
        },
    {
      label: "Amount Left",
        backgroundColor: "pink",
          borderColor: "red",
            borderWidth: 1,
              data: [{% for linr in LINR %} '{{linr}}', {% endfor %}],
        },
      ],
    };

    var chartOptions = {
      responsive: true,
      legend: {
        position: "top",
      },
      title: {
        display: true,
        text: "YearWise Summary INR",
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    };

    window.onload = function () {
      var ctx = document.getElementById("indiacanvas").getContext("2d");
      window.myBar = new Chart(ctx, {
        type: "bar",
        data: barChartData,
        options: chartOptions,
      });
    };

Answer 1

由于 JavaScript 的异步性质，ctx 可能会被重新分配。尝试使用 ctx2 作为第二个图表的变量名称。