Другой график отображения JS с кешем и без - PullRequest
Новая
       5

Другой график отображения JS с кешем и без

0 голосов
/ 27 апреля 2020

Я прихожу к вам сегодня, потому что у меня есть небольшая проблема с диаграммой js, я загружаю данные из почтового запроса с топором ios, и я получаю правильное отображение моего графика, когда я перезагружаю страницу без кэша ... Без кеша css загружается неправильно, и у меня больше нет ярлыков: / Я не знаю, откуда это может ... Вы можете мне помочь? 100

Результат путем обновления кеша

Результат без обновления кеша

Вот мой код, если он может помочь вам 

        .post(`somelinkhere`);

      data.then (function(response){
        var canvas = document.querySelector('#chart-world');
        fitToContainer(canvas);
        function fitToContainer(canvas){
          // Make it visually fill the positioned parent
          canvas.width ='100%';
          canvas.height='100%';
          // ...then set the internal size to match
          canvas.width  = canvas.offsetWidth;
          canvas.height = canvas.offsetHeight;
        }

        new Chart(document.getElementById("chart-world"), {
          type: 'line',
          data: {
            labels: ["LunM", "LunA", "MaM", "MarA", "MerM", "MerA", "JeuM", "JeuA", "VenM", "VenA", "SamM", "SamA"],
            datasets: [{ 
                data: [response.data["LunM"],response.data["LunA"],response.data["MarM"],response.data["MarA"],response.data["MerM"],response.data["MerA"],response.data["JeuM"],response.data["JeuA"],response.data["VenM"],response.data["VenA"], response.data["SamM"], response.data["SamA"]],
                label: "Moyenne",
                borderColor: "#5e72e4",
                fill: false
              }, { 
                data: [response.data["LunMmax"],response.data["LunAmax"],response.data["MarMmax"],response.data["MarAmax"],response.data["MerMmax"],response.data["MerAmax"],response.data["JeuMmax"],response.data["JeuAmax"],response.data["VenMmax"],response.data["VenAmax"], response.data["SamMmax"], response.data["SamAmax"]],
                label: "Maximum",
                borderColor: "#f5365c",
                fill: false
              }, { 
                data: [response.data["LunMmin"],response.data["LunAmin"],response.data["MarMmin"],response.data["MarAmin"],response.data["MerMmin"],response.data["MerAmin"],response.data["JeuMmin"],response.data["JeuAmin"],response.data["VenMmin"],response.data["VenAmin"], response.data["SamMmin"], response.data["SamAmin"]],
                label: "Minimum",
                borderColor: "#11cdef",
                fill: false
              }
            ]
          },
        });
      })

Вот мой HTML холст для диаграммы 

                      <!-- Chart wrapper -->
                      <canvas id="chart-world" class="chart-canvas" width="100%" height="24%"></canvas>
                    </div>

Вызов JS в конце файла, world. js - это мой файл, скопированный выше 

          <script src="/assets/vendor/chart.js/dist/Chart.min.js"></script>
          <script src="/assets/vendor/chart.js/dist/Chart.extension.js"></script>
          <script src="/assets/js/world.js"></script>
...