我尝试使用" https://www.google.com/jsapi"绘制折线图,并从Django视图传递数据;
这是我的模板
<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() {
data = {{analytics_data}}
var data = google.visualization.arrayToDataTable(data);
var options = {
title: 'Facebook Analytics'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
views.py
def show_fb_analytics(request):
analytics_data = [["Day", "Likes", "Share", "Comments"]]
data = FbAnalytics.objects.all()
for item in data:
date = item.date
likes = item.likes
comments = item.comments
shares = item.shares
lst = [date, likes, comments, shares]
analytics_data.append(lst)
return render(request, 'fbchart.html', {'analytics_data':analytics_data})
analytics_data 应以格式
返回数据[['Day', 'Likes', 'Share', 'Comments'],
['31 Aug', 5, 8, 10 ],
['01 Sep', 10, 5, 13 ]]
但是在渲染html模板期间,它给出了给定格式的数据
[['Day', 'Likes', 'Share', 'Comments'],
[u'01Sep', 2, 2, 2]]
表示它会在每个字符串中添加u&#39;&#39;因为我收到错误&#34;未捕获的语法错误:意外的令牌&amp;&#34; 和我的temlate没有返回折线图。 我如何删除此错误?
答案 0 :(得分:6)
您应首先将列表转换为正确的JSON,如下所示:
import json
def show_fb_analytics(request):
...
return render(request, 'fbchart.html', {'analytics_data': json.dumps(analytics_data)})
然后输出&#34; safe&#34;过滤器,所以Django的逃生引擎没有干预:
{{analytics_data|safe}}
转换为JSON会将您的列表输出为JavaScript Array文字(而不是Python List文字;虽然两者非常相似,但它们实际上是不同的,在您的情况下,Python有u
前缀,JS没有&#39} ; t等),使用safe
过滤器会阻止Django的模板引擎将'
转换为'
答案 1 :(得分:0)
@ Spc_555的答案是正确的,但您也可以在视图中将JSON标记为安全:
import json
from django.utils.safestring import marksafe
def show_fb_analytics(request):
...
return render(request, 'fbchart.html', {'analytics_data': mark_safe(json.dumps(analytics_data))})