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);
})()