# Flask，JSON 和 Google Charts API

> 原文： [https://pythonspot.com/flask-json-and-the-google-charts-api/](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，[请参阅此文章](https://pythonspot.com/json-encoding-and-decoding-with-python/)。

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

```py
import json
import urllib2

def getExchangeRates():
rates = []
response = urllib2.urlopen('http://api.fixer.io/latest')
data = response.read()
rdata = json.loads(data, parse_float=float)

rates.append( rdata['rates']['USD'] )
rates.append( rdata['rates']['GBP'] )
rates.append( rdata['rates']['JPY'] )
rates.append( rdata['rates']['AUD'] )
return rates

rates = getExchangeRates()
print rates

```

## 使用 Flask 的 Google Charts API

使用 [Google Charts API](https://developers.google.com/chart/interactive/docs/gallery)，您可以在网站上显示实时数据。有很多很棒的图表可以轻松添加到 Flask 应用中。我们只需将通过 JSON 从服务器获取并解析的数据提供给 Google Charts API。

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

```py
from flask import Flask, flash, redirect, render_template, request, session, abort
import os
import json
import urllib2

tmpl_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates')
app = Flask(__name__, template_folder=tmpl_dir)

def getExchangeRates():
rates = []
response = urllib2.urlopen('http://api.fixer.io/latest')
data = response.read()
rdata = json.loads(data, parse_float=float)

rates.append( rdata['rates']['USD'] )
rates.append( rdata['rates']['GBP'] )
rates.append( rdata['rates']['HKD'] )
rates.append( rdata['rates']['AUD'] )
return rates

@app.route("/")
def index():
rates = getExchangeRates()
return render_template('test.html',**locals())

@app.route("/hello")
def hello():
return "Hello World!"

if __name__ == "__main__":
app.run()

```

我们有这个模板：

```py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

```

结果：

![Flask App](img/f10feda9b4de908651d49d99ae3924e4.jpg)

Flask App

[下载 Flask 示例](https://pythonspot.com/download-flask-examples/)