Python 使用数据存储数据呈现google图表

我正在努力使用数据存储中存储的数据来呈现谷歌图表。目前我已经查询了数据模型：

results = MyDataModel.query().fetch() 

正是在这个阶段，我不确定该怎么办。例如，最好用python创建一个列表，如：

result_list = []
for result in results:
    result_list.append([result.employee, result.salary])

然后使用Jinja2模板将其传递到数组表中：

var data = google.visualization.arrayToDataTable([
   ['Employee Name', 'Salary'],
   {% for result in result_list %}
    {{result | safe}}
   {% endfor %},
  false);

或者最好是将行数据动态添加到数据表中，还是直接查询数据存储

---

无论我尝试哪种方式，我都在努力渲染任何东西。任何帮助都将不胜感激。

将数据插入Jinja2模板的想法是正确的。看起来您只是没有正确格式化输入到

google.visualization.arrayToDataTable

。请注意，其中一个开放方括号（[）未关闭

下面是一个例子，我是如何做到这一点的，以防它帮助你。你可以看到它的生活

创建

result\u列表

数组没有意义。无论是在处理程序中还是在模板中执行，

results

查询都将得到处理

<script type="text/javascript">
var data = new google.visualization.DataTable();
data.addColumn("string", "Candidate");
data.addColumn("number", "Votes");
data.addColumn({type:"string", role:"tooltip"});
data.addColumn({type: "boolean", role:"certainty"});
data.addColumn("number", "Received");
data.addColumn({type:"string", role:"tooltip"});
data.addColumn("number", "Transferred");
data.addColumn({type:"string", role:"tooltip"});
data.addRows([["Vanilla", 110.000000, "Votes: 110", true, 0.000000, "Votes: 110", 0.000000, "Votes: 110"],["Chocolate", 117.000000, "Votes: 117", true, 0.000000, "Votes: 117", 0.000000, "Votes: 117"],["Strawberry", 80.000000, "Votes: 80", true, 0.000000, "Votes: 80", 0.000000, "Votes: 80"],["Chocolate Chip", 103.000000, "Votes: 103", true, 0.000000, "Votes: 103", 0.000000, "Votes: 103"],["Cookies and Cream", 118.000000, "Votes: 118", true, 0.000000, "Votes: 118", 0.000000, "Votes: 118"],["Exhausted", 0.000000, "Votes: 0", true, 0.000000, "Votes: 0", 0.000000, "Votes: 0"]]);
var formatter = new google.visualization.NumberFormat({fractionDigits:0});
formatter.format(data, 1);
formatter.format(data, 3);
formatter.format(data, 5);
var options = {
width:'100%',
height:200,
legend:{position:"none"},
chartArea:{left:100,top:0,width:'100%',height:175},
hAxis:{maxValue:276},
isStacked:true,
colors:["#fcd050", "#87cf32", "#ef3638"],
};
var chart = new google.visualization.BarChart(document.getElementById("282249-1"));
chart.draw(data, options);
</script>

var data=new google.visualization.DataTable（）；
data.addColumn（“字符串”、“候选项”）；
数据。添加栏（“数字”、“投票”）；
addColumn（{type:“string”，role:“tooltip”}）；
addColumn（{type:“boolean”，role:“确定性”}）；
数据。添加列（“编号”、“收到”）；
addColumn（{type:“string”，role:“tooltip”}）；
数据。添加列（“编号”、“转移”）；
addColumn（{type:“string”，role:“tooltip”}）；
数据。添加行（[“香草”，110.000000，“投票数：110”，真，0.000000，“投票数：110”，0.000000，“投票数：110”]，[“巧克力”，117.000000，“投票数：117”，真，0.000000，“投票数：117”，0.000000，“投票数：117”]，[“草莓”，80.000000，“投票数：80”，真，0.000000，“投票数：80”，0.000000，“投票数：80”，0.000000，“投票数：80”]，[“巧克力片”，103.000000，“投票数：103”，正确，0.000000，“票数：103”，0.000000，“票数：103”]，[“饼干和奶油”，118.000000，“票数：118”，正确，0.000000，“票数：118”，0.000000，“票数：118”]，[“耗尽”，0.000000，“票数：0”，正确，0.000000，“票数：0”，0.000000，“票数：0”]；
var formatter=new google.visualization.NumberFormat（{fractionDigits:0}）；
格式化程序。格式化（数据，1）；
格式（数据，3）；
格式化程序。格式化（数据，5）；
变量选项={
宽度：'100%'，
身高：200，
图例：{位置：“无”}，
图表区：{左：100，上：0，宽：100%，高：175}，
hAxis:{maxValue:276}，
isStacked：是的，
颜色：[“fcd050”、“87cf32”、“ef3638”]，
};
var chart=newgoogle.visualization.BarChart（document.getElementById（“282249-1”）；
图表绘制（数据、选项）；

最好的方法是使用AJAX加载数据，因此需要使用单独的处理程序返回JSON响应

通过使用Google的Polymer（保证只在Chrome中工作），从JSON绘制图表非常容易：

<script src="//googlewebcomponents.github.io/google-chart/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="//googlewebcomponents.github.io/google-chart/components/google-chart/google-chart.html">
<google-chart
  options='{"title": "Super chart"}'
  data='/chart-data.json'>
</google-chart>

通过使用projection，您将只为“小型”数据存储操作付费——它将只消耗1次读取。强烈建议用于图表！

Google charts具有可用于在服务器端输出到JSON的功能，以帮助更轻松地处理格式设置。使用上面的结果列表：

import gviz_api
datatable = gviz_api.DataTable([('Employee', 'string'), ('Salary', 'number')])
datatable.LoadData(result_list)
json = datatable.ToJSon()
# json is your jinja variable

在模板中：

var data = {{json|safe}};

---

我会像你在问题中描述的那样在你的Jinja2模板中这样做。这对你不起作用吗？请注意，你可以将

结果

传递给你的模板，并且你不需要创建

结果列表

。谢谢@Kekito，我无法让它起作用。因为我注意到一个可能的问题，我想我可能需要一个“，”之后{{结果|安全}但是我试过了，仍然没有任何结果。@Kekito-我忘了提一下，我的查询包含其他字段，如date_started等，所以从查询中筛选这些字段是否比创建结果_list更好？为我们打印您试图输入到图表中的数组的内容。这更像是一个google图表问题，而不是一个Apping问题更棒的是，不需要在appengine中调试，因为appengine更难调试。目前，数组的内容是[['Test'，10]，“Other Test'，9]，“Other Test'，8]]，但它会以如下方式呈现为html['Employee Name'，Salary'，['Test 10]，['Other Test'，9]['Something other'，8]]，所以我假设在每个输出之间没有“，”，这就是为什么图表没有呈现？为什么使用AJAX比在网页中提供所需数据更好？因为当你有更多雇主时，需要更多的时间来请求所有这些数据。这仍然是一个非常繁重的数据存储请求。

var data = {{json|safe}};