Laravel与Chart.js单页多图表显示异常求助

我尝试在同一页面中展示两个图表：1个环形图（doughnut）和1个饼图（pie），但实现后仅第一个图表能显示，同时出现错误提示：Failed to create chart: can't acquire context from the given item。我试过相关解决方案但无效，反复检查仍未找到问题原因，求帮助。

视图代码片段 #

第一个图表 #

<div class="card-body d-flex flex-center flex-column" style="width: 381px; height:350px;">
  <!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js-->
  <!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
  <canvas id="pengeluaran" width="350"></canvas>
</div>

第二个图表 #

<div class="card-body d-flex flex-center flex-column" style="width: 381px; height:350px;">
  <!-- Find the JS file for the following chart at: src/js/charts/echarts/bandwidth-saved.js-->
  <!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
  <canvas id="sponsorship" width="350"></canvas>
</div>

JavaScript代码 #

第一个图表的JS代码 #

<script>
  const ctx1 = document.getElementById('pengeluaran');
  const ExpensesLabel = ['Rewards', 'Bantuan', 'Others'];
  const ExpensesData = {
    labels :ExpensesLabel,
    datasets: [{
    label: 'Sebaran Pengeluaran untuk Anak',
    data: [300, 50, 100],
    backgroundColor: [
      "rgb(255, 99, 132, 0.2)", "rgb(54, 162, 235, 0.2)",
      "rgb(255, 206, 86, 0.2)",
    ],
    borderColor: [
      "rgb(255, 99, 132, 1)", "rgb(54, 162, 235, 1)",
      "rgb(255, 206, 86, 1)",
    ],
    hoverOffset: 4,
    borderWidth: 1,
  }]};

  const options1 = {
      responsive: true,
      maintainAspectRatio: true,
      layout: {
        padding: 10
      }
    };

  new Chart(ctx1, {
    type: 'doughnut',
    data: ExpensesData,
    options: options1
  });
</script>

第二个图表的JS代码 #

<script>
  const ctx2 = document.getElementById('sponsorship');
  const SponsorLabel = ['TK','SD','SMP','SMA-K / Kuliah'];
  const SponsorData = {
    labels : SponsorLabel,
    datasets: [{
    label: 'Sebaran Penerimaan Hadiah Sponsor',
    data: [300, 50, 100, 90],
    backgroundColor: [
      "rgb(255, 99, 132, 0.2)", "rgb(54, 162, 235, 0.2)",
      "rgb(255, 206, 86, 0.2)", "rgb(75, 192, 192, 0.2)",
    ],
    borderColor: [
      "rgb(255, 99, 132, 1)", "rgb(54, 162, 235, 1)",
      "rgb(255, 206, 86, 1)", "rgb(75, 192, 192, 1)",
    ],
    hoverOffset: 4,
    borderWidth: 1
    }]
};

  const options2 = {
      responsive: true,
      maintainAspectRatio: true,
      layout: {
        padding: 10
      }
    };

  new Chart(ctx2, {
    type: 'pie',
    data: SponsorData,
    options: options2,
  });
</script>

内容的提问来源于stack exchange，提问作者specterdemara