Question

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

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);

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

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

Answer 1

您可以将数据插入Jinja2模板中。看起来您只是没有正确地将输入格式化为google.visualization.arrayToDataTable。请注意，您的一个方括号（[）未关闭。

以下是我如何做到这一点的示例，以防它帮助您。你可以看到它here。

创建result_list数组没有意义。 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>

Answer 2

Google Charts有Data Source Python Library可用于在服务器端输出到JSON，以帮助更轻松地处理格式化。使用上面的result_list：

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}};

Answer 3

最好的方法是使用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>

你的图表处理程序：

result = [['Employee', 'Salary']]
result += [[i.employee, i.salary] for i in MyDataModel.query().fetch(
  projection=['employee', 'salary'])]
self.response.headers['Content-Type'] = 'application/json'
self.response.write(json.dumps(result))

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

使用数据存储区数据呈现谷歌图表

3 个答案: