Javascript window.onload не отображает диаграммы с Chart.js и Flask

Question

Я новичок в Javascript, и теперь мне поручили отображать графики с Chart.js. Я сделал группировку на Python и использовал Flask для создания веб-приложения. Тем не менее, моя диаграмма почему-то не отображается, и я не уверен, почему.

HTML

<canvas id="barchart2" width="600" height="400"></canvas>

JS

<script>
 var config = {
    type: 'bar',
    labels : [
                       "52",

                       "51",

                       "54",

                       "53",

                       "46",

                       "82",

                       "57",

                       "48",

                       "50",

                       "56",
                   ],
        datasets : [
           {
                 fillColor: "rgba(151,187,205,0.2)",
                 strokeColor: "rgba(151,187,205,1)",
                 pointColor: "rgba(151,187,205,1)",
              data : [
                           611,

                           18,

                           11,

                           10,

                           9,

                           8,

                           6,

                           3,

                           2,

                           2,
                         ]
           }
           ]
         },
     options: {
       legend: {
         display: true,
       },
       title: {
         display: true,
         text: 'Top 10 District in Singapore',
       }
     },
  };
  window.onload = function() {
           var ctx = document.getElementById("barchart2").getContext("2d");
           window.myBar = new Chart(ctx, config);
  };
</script>

Когда я использовал этот JS вместо

var barData = {
         labels : [{% for item in lbl1 %}
                        "{{item}}",
                    {% endfor %}],
         datasets : [
            {
                  fillColor: "rgba(151,187,205,0.2)",
                  strokeColor: "rgba(151,187,205,1)",
                  pointColor: "rgba(151,187,205,1)",
               data : [{% for item in val1 %}
                            {{item}},
                          {% endfor %}]
            }
            ]
         }
         // get bar chart canvas
         var mychart = document.getElementById("barchart2").getContext("2d");
         // draw bar chart
         new Chart(mychart).Bar(barData);

Он работал отлично ( примечание: без параметров. Я пытался добавить параметры, но параметры не отображаются, хотя диаграммы все еще отображаются. Поэтому я хочу перейти на этот формат вместо ). Но когда я использую функцию window.onload, диаграмма вообще не появляется.

Буду признателен за вашу помощь. Спасибо!

Answer 1

Не могли бы вы вставить сюда полный сгенерированный код JS с данными? Или просмотрите ваши данные, потому что я думаю, что это может быть проблемой.

Вот JSFiddle с вашим исходным кодом (без ваших данных), который работает:

https://jsfiddle.net/wj80597q/5/

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },
  options: {
    legend: {
      display: true,
    },
    title: {
      display: true,
      text: 'Top 10 District in Singapore',
    }
  },
};
(function() {
  var ctx = document.getElementById("barchart2").getContext("2d");
  window.myBar = new Chart(ctx, config);
})()