时间戳

首页 > 解决方案 > Javascript window.onload 不使用 Chart.js 和 Flask 显示图表

javascript - Javascript window.onload 不使用 Chart.js 和 Flask 显示图表

问题描述

我是 Javascript 新手，现在我的任务是使用 Chart.js 显示图表。我在 Python 中进行了分组，并使用 Flask 构建了 Web 应用程序。但是，我的图表不知何故没有显示，我不知道为什么。

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 函数时，图表根本没有出现。

感谢您的帮助。谢谢！

标签： javascriptcanvasflaskchart.js

解决方案

你能在这里粘贴完整的生成的 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);
})()

推荐阅读