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

Question

我正在努力使用数据存储中存储的数据来呈现 google 图表。目前我查询过数据模型：

results = MyDataModel.query().fetch()

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

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

然后使用 Jinja2 模板将其传递到数组中 table:

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

最好的方法是使用 AJAX 加载数据，因此您需要有单独的处理程序来 return 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))

通过使用投影，您只需为 "small" 数据存储操作付费——它只会消耗 1 次读取。强烈推荐用于图表！

Answer 3

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

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

Rendering a google chart using datastore data

python

google-app-engine

google-visualization