0

我的代码：

<html>
  <head>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['FileName', 'Frequency'],
        {% for l in list1 %}
              [{{l.file_name}},{{l.frequency_count}}], 
        {% endfor %}
        ]);

        var options = {
        title: 'Search Performance',
        hAxis: {title: 'FileName', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
   </script>
  </head>
  <body>
     <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

在服务器上运行我的应用程序（在 Django 中创建）时，此图表未显示，为什么？这个页面是“results.html”，它来自我的views.py 文件。这里“list1”包含存储在表中的数据，即“file_name”和“frequency_count”。为什么会这样？

我是 Django、google-charts 和 JavaScript 的新手。

4

1 回答 1

1

您可能在打印图表的 javacript 数组值的循环中遇到问题。我猜文件名是字符串，因此它们需要用'or分隔"，如下所示：

{% for l in list1 %}
    ['{{ l.file_name }}', {{ l.frequency_count }}], 
{% endfor %}

为了测试这一点，我刚刚摆脱了循环并放置了几行示例静态数据，如下所示：

var data = google.visualization.arrayToDataTable([
        ['FileName', 'Frequency'],
            ['this', 100],
            ['that', 200]
        ]);

我得到了图表：

在此处输入图像描述

于 2012-07-06T11:06:42.257 回答