Question

我是Java的新手，现在我的任务是使用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函数时，该图表根本不会出现。

感谢您的帮助。谢谢！

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

Javascript window.onload不显示带有Chart.js和Flask的图表

1 个答案: