图表Js不显示问题：Ajax Call

Question

我是Chart JS库的新手。我在自动显示图表时遇到问题。在我点击其中一个图表或使用chrome开发人员工具触发加载之前，图表不会显示。你能帮我自动显示图表而不必点击吗？

感谢您的帮助。

我的页面代码如下：

<!-- Layout of the different charts -->
  <div class="container-fluid">

    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="chart-wrapper">
          <div class="chart-title">
            Distance totale (en mètres) par Tag
          </div>
          <div class="chart-stage">
              <div id="grid-1-1">
                <div id="chart-01"></div>
                <canvas id="chart01" ></canvas>
              </div>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4">
        <div class="chart-wrapper">
          <div class="chart-title">
            Durée totale (en secondes) par Tag
          </div>
          <div class="chart-stage">
            <div id="chart-02"></div>
            <canvas id="chart02"></canvas>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4">
        <div class="chart-wrapper">
          <div class="chart-title">
            Nombre de Trajets par Zone
          </div>
          <div class="chart-stage">
            <div id="chart-03"></div>
            <canvas id="chart03"></canvas>
          </div>
        </div>
      </div>

    </div>

    <div class="row" >

      <div class="col-sm-6 col-md-4">
        <div class="chart-wrapper">
          <div class="chart-title">
            Durée totale (en secondes) par Zone
          </div>
          <div class="chart-stage">
            <div id="chart-04"></div>
            <canvas id="chart04"></canvas>
          </div>
        </div>
      </div>


    </div>
    <hr/>

  </div>

<!-- The scripts to inject data in the graphs -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script>
      var userSite = '';
      var ctx1 = document.getElementById("chart01");
      var ctx2 = document.getElementById("chart02");
      var ctx3 = document.getElementById("chart03");
      var ctx4 = document.getElementById("chart04");
      var tags = [];
      var tagsColor = [];
      var tagsBorderColor = [];
      var distances = [];
      var durations = [];
      var areas = [];
      var nbpaths = [];
      var chart01 = {};
      var chart02 = {};
      var chart03 = {};
      var chart04 = {};

      <!-- Uitlity to create colors adapted to the graphs -->
        function getRandColor(){
           var color = [{c:'rgba(255, 99, 132, 0.2)',b:'rgba(255,99,132,1)'},
         {c:'rgba(54, 162, 235, 0.2)',b:'rgba(54, 162, 235, 1)'},
         {c:'rgba(255, 206, 86, 0.2)', b:'rgba(255, 206, 86, 1)'},
         {c:'rgba(75, 192, 192, 0.2)', b:'rgba(75, 192, 192, 1)'},
         {c:'rgba(153, 102, 255, 0.2)',b:'rgba(153, 102, 255, 1)'},
         {c:'rgba(255, 159, 64, 0.2)]',b:'rgba(255, 159, 64, 1)'}];
         return color[Math.floor(Math.random()*(color.length-1))];
        }

      <!-- Get the specific site to feed data -->
      window.onload = function() {
        $.ajax({
            type: 'GET',
            url: 'rest/maps/sites',
            dataType: 'json',
            async: false,
            success: function(data) {
                userSite = data[0];
            }
        });


        <!-- Calling webservices to get data -->
        $.ajax({
        url: 'rest/tags/' + userSite + '/chartinfos',
        dataType: 'json',
        success: function(response, status){
            for ( i=0; i<response.length; i++){
                var color = getRandColor();
                tags.push(response[i].idTag);
                durations.push(response[i].duration);
                tagsColor.push(color.c);
                tagsBorderColor.push(color.b);
                distances.push(response[i].distance);
            }
        }
        });

        chart01 = new Chart(ctx1, {
          type: 'bar',
          data: {
              labels: tags,
              datasets: [{
                  label: 'Distance/Tag',
                  data: distances,
                  backgroundColor: tagsColor,
                  borderColor: tagsBorderColor,
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
        });

        chart02 = new Chart(ctx2, {
          type: 'bar',
          data: {
              labels: tags,
              datasets: [{
                  label: 'Durée/Tag',
                  data: durations,
                  backgroundColor: tagsColor,
                  borderColor: tagsBorderColor,
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
        });

        $.ajax({
        url: 'rest/areas/' + userSite + '/chartinfos2',
        dataType: 'json',
        success: function(response, status){
            for ( i=0; i<response.areas.length; i++){
                var color = getRandColor();
                areas.push(response.areas[i].idAreas);
                nbpaths.push(response.areas[i].nbPaths);
                tagsColor.push(color.c);
                tagsBorderColor.push(color.b);
            }
        }
        });

        chart03 = new Chart(ctx3, {
          type: 'bar',
          data: {
              labels: areas,
              datasets: [{
                  label: 'Trajets/Zone',
                  data: nbpaths,
                  backgroundColor: tagsColor,
                  borderColor: tagsBorderColor,
                  borderWidth: 1
              }]
          },
          options: {
              scales: {

                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
        });

        chart04 = new Chart(ctx4, {
          type: 'bar',
          data: {
              labels: areas,
              datasets: [{
                  label: 'Durée/Zone',
                  data: durations,
                  backgroundColor: tagsColor,
                  borderColor: tagsBorderColor,
                  hidden: false,
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
        });
      };

  </script>

</body>
</html>