顯示谷歌的圖表使用的Django

我已經生成在Django變量data以下格式：顯示谷歌的圖表使用的Django

data = [['100',10],['90',9],['80',8]]

，我已經選擇render_to_response使用它傳遞給我的模板：

return render_to_response('template.html', { 
              'data': data, 
              }, 
              context_instance=RequestContext(request))

在模板標題我已撥打Google Charts來生成折線圖：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Number'); 
    data.addColumn('number', 'Number/10'); 
    data.addRows({{ data }}); 

var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
chart.draw(data, {width: 400, height: 240, title: "Numbers"}); 
} 
</script>

當我這樣做時，什麼都不顯示。如果我從data中刪除字符串並再試一次，則會顯示圖表，但顯然沒有x軸標籤。

我還試圖使用arrayToDataTable功能附加數據：

var data = google.visualization.arrayToDataTable([ 
     ['Number', 'Number/10'], 
     {% for datum in data %} 
      {{ datum }}, 
     {% endfor %}], 
     false);

但這再次未能顯示任何圖表。

有關如何更改上述任意一項的建議，或者嘗試使用其他方法來獲取x軸標籤？

來源

2011-09-15 Sinidex

我已經確認arrayToDataTable方法將顯示如果字符串也被刪除。我也可以用任何一種方法顯示多條曲線。 – Sinidex

您必須禁用自動轉換結果。您可以通過添加安全過濾器這樣做：

data.addRows({{ data|safe }});

或

{% autoescape off %} 
[...] 
    {{ data }} 
[...] 
{% endautoescape %}

我的建議是，如果你可以安裝額外的軟件包，使用這些包裝中的一種：

http://code.google.com/p/google-chartwrapper/

https://github.com/jacobian/django-googlecharts/

我無法添加超過兩個鏈接，但另一個位於這裏：code.google.com/p/django-graphs/

來源

2011-09-15 05:59:48 Nemoverflow

安全的數據提示看起來不錯，但我已經嘗試過不同的組合（只是|安全，| autoescape，兩種數據加載方法安全等），沒有運氣。 googlecharts看起來很有趣;我會試一試。 Tx的建議。 – Sinidex

Scratch that，|安全地使用第一種數據方法，如您所示。我有另一個模糊結果的錯誤。 TX！ – Sinidex

顯示谷歌的圖表使用的Django

回答

相關問題