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で作成）を実行すると、このグラフが表示されません。なぜですか？このページは私のviews.pyファイルからの「results.html」です。ここで、「list1」には、テーブルに格納されているデータ、つまり「file_name」と「frequency_count」が含まれています。なぜこうなった？

Django、google-charts、JavaScriptは初めてです。

4

1 に答える 1

1

グラフの値のjavacript配列を出力するループで問題が発生している可能性があります。ファイル名は文字列だと思います。そのため、次のように、'またはで区切る必要があります。"

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

これをテストするために、ループを取り除き、次のようにサンプルの静的データを2行配置しました。

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

そして、私はチャートを機能させました：

ここに画像の説明を入力してください

于 2012-07-06T11:06:42.257 に答える