原文： https://pythonspot.com/flask-json-and-the-google-charts-api/

本教程将教您如何构建结合 JSON 和 Google Charts API 的 Flask 应用。 如果您在阅读 Flask 之前没有任何经验，我建议您阅读以前的教程，那么它们会很有趣！

获取 JSON 数据

要显示很棒的图表，我们首先需要一些数据。有两种常见的方法可以在 Web 应用程序中获取数据：使用 API（通常为 JSON）的服务器中的数据和数据库中的数据。 我使用 Fixer.io JSON API 来获取一些财务数据，但是任何 JSON API 都可以。 如果您不熟悉 JSON，请参阅此文章。

我们编写此脚本来获取汇率：

  1. import json
  2. import urllib2
  4. def getExchangeRates():
  5. rates = []
  6. response = urllib2.urlopen('http://api.fixer.io/latest')
  7. data = response.read()
  8. rdata = json.loads(data, parse_float=float)
  10. rates.append( rdata['rates']['USD'] )
  11. rates.append( rdata['rates']['GBP'] )
  12. rates.append( rdata['rates']['JPY'] )
  13. rates.append( rdata['rates']['AUD'] )
  14. return rates
  16. rates = getExchangeRates()
  17. print rates

使用 Flask 的 Google Charts API

使用 Google Charts API，您可以在网站上显示实时数据。有很多很棒的图表可以轻松添加到 Flask 应用中。我们只需将通过 JSON 从服务器获取并解析的数据提供给 Google Charts API。

为目录创建带有目录/templates/的 flask 应用程序。 这是 Flask 的主要代码：

  1. from flask import Flask, flash, redirect, render_template, request, session, abort
  2. import os
  3. import json
  4. import urllib2
  6. tmpl_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates')
  7. app = Flask(__name__, template_folder=tmpl_dir)
  9. def getExchangeRates():
  10. rates = []
  11. response = urllib2.urlopen('http://api.fixer.io/latest')
  12. data = response.read()
  13. rdata = json.loads(data, parse_float=float)
  15. rates.append( rdata['rates']['USD'] )
  16. rates.append( rdata['rates']['GBP'] )
  17. rates.append( rdata['rates']['HKD'] )
  18. rates.append( rdata['rates']['AUD'] )
  19. return rates
  21. @app.route("/")
  22. def index():
  23. rates = getExchangeRates()
  24. return render_template('test.html',**locals())
  26. @app.route("/hello")
  27. def hello():
  28. return "Hello World!"
  30. if __name__ == "__main__":
  31. app.run()

我们有这个模板：

  1. {% block body %}
  3. <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  4. <div id="chart_div" style="width: 900px; height: 300px;">
  5. <div>
  7. <script type="text/javascript">//<![CDATA[ 
  9. google.load('visualization', '1', {packages: ['corechart', 'bar']});<br />
  10. google.setOnLoadCallback(drawBasic);</p>
  11. <p>function drawBasic() {</p>
  12. <p>      var data = google.visualization.arrayToDataTable([<br />
  13.         ['Currency', 'Rate', { role: 'style' }],<br />
  14.         ['USD', { {rates[0]}}, 'gold'],<br />
  15.         ['GBP', { {rates[1]}}, 'silver'],<br />
  16.         ['HKD', { {rates[2]}}, 'brown'],<br />
  17.         ['AUD', { {rates[3]}}, 'blue']<br />
  18.       ]);</p>
  19. <p>      var options = {<br />
  20.         title: 'Exchange rate overview',<br />
  21.         chartArea: {width: '50%'},<br />
  22.         hAxis: {<br />
  23.           title: '',<br />
  24.           minValue: 0<br />
  25.         },<br />
  26.         vAxis: {<br />
  27.           title: ''<br />
  28.         }<br />
  29.       };</p>
  30. <p>      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));</p>
  31. <p>      chart.draw(data, options);<br />
  32.     }<br />
  33. //]]>  </p>
  34. <p></script>
  36. {% endblock %}

结果：

Flask，JSON 和 Google Charts API - 图1

Flask App

下载 Flask 示例