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

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>