多个 ChartJS 脚本不能同时工作答案

【问题标题】：Multiple ChartJS scripts are not working at the same time多个 ChartJS 脚本不能同时工作
【发布时间】：2021-05-13 15:19:01
【问题描述】：

当我在 ChartJS 中使用单个图表时，它运行良好，但每当我使用多个图表时，只有最后一个图表有效，其他图表不再显示。

我不确定问题到底出在哪里，因为我已经检查了控制台和终端，如果我会收到任何错误，以便进行调试。

index.html

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

# The Script for the first chart

<script>
    // Driver Status
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [{{pending}},{{hired}},{{terminated}}],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
              ],
          label: 'Population'
        }],
        labels: ['pending', 'hired', 'terminated']
      },
      options: {
        responsive: true
      }
    };
    window.onload = function() {
      var ctx = document.getElementById('pie-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };
</script>

# The Script for the Second chart

<script>
    // EVR STATUS
    var config2 = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [{{done}},{{partial}},{{not_started}}],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
              ],
          label: ['EVR Status']
        }],
        labels: ['done', 'partial', 'not_started']
      },
      options: {
        responsive: true
      }
    };
    window.onload = function() {
      var ctx2 = document.getElementById('evr-status').getContext('2d');
      window.myPie2 = new Chart(ctx2, config2);
    };
</script>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-muted">No of Drivers: {{drivers_list.count}}</h5>
                                <div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
                                    <h1 class="fs-20">Driver Status</h1>
                                </div>
                            </div>
# THE FIRST CHART
                            <canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-muted">Driver</h5>
                                <div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
                                    <h1 class="fs-20">EVR Status</h1>
                                </div>
                            </div>
# THE SECOND CHART
                            <canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
                        </div>
                    </div>
{% endblock %}

【问题讨论】：

标签： javascript django charts django-views chart.js

【解决方案1】：

问题似乎是 2 个 onload 函数。如果您在第二个 onLoad 函数中制作两个图表，它将起作用。如果你也把它做成一个单独的脚本标签会更好看。

<body>
  <!--<canvas id="chartJSContainer" width="600" height="400"></canvas>-->


  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card">
      <div class="card-body">
        <h5 class="text-muted">No of Drivers:</h5>
        <div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
          <h1 class="fs-20">Driver Status</h1>
        </div>
      </div>
      # THE FIRST CHART
      <canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
    </div>
  </div>
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card">
      <div class="card-body">
        <h5 class="text-muted">Driver</h5>
        <div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
          <h1 class="fs-20">EVR Status</h1>
        </div>
      </div>
      # THE SECOND CHART
      <canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
    </div>
  </div>

  <script>
    // Driver Status
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [10, 20, 30],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          label: 'Population'
        }],
        labels: ['pending', 'hired', 'terminated']
      },
      options: {
        responsive: true
      }
    };
  </script>

  # The Script for the Second chart

  <script>
    // EVR STATUS
    var config2 = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [30, 20, 10],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          label: ['EVR Status']
        }],
        labels: ['done', 'partial', 'not_started']
      },
      options: {
        responsive: true
      }
    };
    window.onload = function() {
      var ctx2 = document.getElementById('evr-status').getContext('2d');
      window.myPie2 = new Chart(ctx2, config2);
      var ctx = document.getElementById('pie-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

【讨论】：