Chartjs 图表不显示

Question

我有多个图表想在此刀片文件上显示，但似乎只能显示一个图表。我需要显示 4 个。我检查了开发人员控制台，没有与此问题相关的错误我可能会出错吗？我正在尝试使用 chartjs3.0.1

在 chartjs 2 上这似乎有效但是当我尝试使用更高版本时这个问题出现了

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js" integrity="sha512-HJ+fjW1Hyzl79N1FHXTVgXGost+3N5d1i3rr6URACJItm5CjhEVy2UWlNNmFPHgX94k1RMrGACdmGgVi0vptrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js" charset="utf-8"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>

 <!-------------- TOP 3 CROP COMMODITIES BY PRODUCTION VALUE --------------->

 <script>
    // Declaring variables for data to be used in graph as well as the url to pull from
    const url = "{{url('top3cropcomms')}}";
    const crop_sum = new Array();
    const crop_comm = new Array();
    // Create a document.ready function so the chart loads as soon as the page is opened
    $(document).ready(function(){
        // GET function for bringing the values from database into the variables listed above
      $.get(url, function(response){
        response.forEach(function(data){
            crop_comm.push(data.commodity);
            crop_sum.push(data.com_sum);
        });
        // setup 
        const data = {
        labels: crop_comm,
        datasets: [{
            label: 'Weekly Sales',
            data: crop_sum,
            backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(0, 0, 0, 0.2)'
            ],
            borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(0, 0, 0, 1)'
            ],
            borderWidth: 1
        }]
        };

        // config 
        const config = {
        type: 'bar',
        data,
        options: {
            indexAxis: 'y',
            scales: {
            y: {
                beginAtZero: true
            }
            }
        }
        };

        // render init block
        const top3Crop_Chart = new Chart(
        document.getElementById('top3cropcomm'),
        config
        );
      });
    });
</script>

<!-------------- TOP 3 LIVESTOCK COMMODITIES BY PRODUCTION VALUE --------------->

<script>
    const ls_comms_url = "{{url('top3lscomms')}}";
    const ls_sum = new Array();
    const ls_comm = new Array();
    $(document).ready(function(){
      $.get(ls_comms_url, function(response){
        response.forEach(function(data){
            ls_comm.push(data.commodity);
            ls_sum.push(data.com_sum);
        });
        // setup 
    const top3ls_data = {
      labels: ls_comm,
      datasets: [{
        label: 'Weekly Sales',
        data: ls_sum,
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

    // config 
    const  top3ls_config = {
      type: 'bar',
      top3ls_data,
      options: {
        indexAxis: 'y',
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // render init block
    const top3LS_Chart = new Chart(
      document.getElementById('top3lscomm'),
      top3ls_config
    );

            
      });
    });
</script>

<!-------------- CROP TRADE DATA --------------->

<script>
    const crop_trade_url = "{{url('croptradedata')}}";
    const crop_total_value = new Array();
    const year = new Array();
    $(document).ready(function(){
      $.get(crop_trade_url, function(response){
        response.forEach(function(data){
            crop_total_value.push(data.crop_total_value);
            year.push(data.year);
        });
        // setup 
    const croptrade_data = {
      labels: year,
      datasets: [{
        label: 'Weekly Sales',
        data: crop_total_value,
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

    // config 
    const  croptrade_config = {
      type: 'bar',
      croptrade,
      options: {
        indexAxis: 'y',
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // render init block
    const top3LS_Chart = new Chart(
      document.getElementById('croptrade'),
      croptrade_config
    );

            
      });
    });
</script>

@endsection