在这个教程中，我们将指导你如何通过 API 获取实时外汇数据并将其集成到数据看板中，用于 APP 中的数据展示。我们将覆盖从获取数据到在界面中展示图形的完整过程。

第一步：获取实时外汇行情数据

为了从 API 获取外汇数据，我们使用了 requests 库向外汇行情 API 发送请求。

1.1 设置 API 请求

import requests

api_url = 'https://data.infoway.io/common/batch_kline/5/1/GBPUSD'

# 设置请求头
headers = {
    'User-Agent': 'Mozilla/5.0',
    'Accept': 'application/json',
    'apiKey': 'YOUR_API_KEY'  # 申请API KEY: www.infoway.io
}

# 发送GET请求
response = requests.get(api_url, headers=headers)

# 输出结果
print(f"HTTP code: {response.status_code}")
print(f"message: {response.text}")

1.2 请求返回示例

{
  "t": "1752872400",
  "h": "0.74578",
  "o": "0.74527",
  "l": "0.74503",
  "c": "0.74503",
  "v": "45.0",
  "vw": "33.530460",
  "pc": "-0.09%",
  "pca": "-0.00065"
}

在这个返回数据中，你将看到实时的外汇交易数据：

• t: 时间戳
• h: 最高价
• o: 开盘价
• l: 最低价
• c: 收盘价
• v: 成交量
• vw: 加权平均价
• pc: 日内变化百分比
• pca: 日内价格变化值

第二步：解析数据并准备展示

获取到数据后，我们可以从返回的 JSON 格式数据中提取所需的信息。

2.1 数据解析

import json

# 这里的response.text存储的是infoway API返回的 JSON 数据
data = json.loads(response.text)

# 提取需要的数据
time = data['t']
high = data['h']
open_price = data['o']
low = data['l']
close = data['c']

# 打印提取的值
print(f"Time: {time}, High: {high}, Open: {open_price}, Low: {low}, Close: {close}")

第三步：在数据看板中展示图形

将数据展示在图形界面上通常使用可视化库。在这里我们可以使用 matplotlib 来绘制外汇价格的折线图。

3.1 绘制折线图

import matplotlib.pyplot as plt

# 以时间、开盘价、收盘价绘制图形
times = [time]  # 时间戳列表
prices = [open_price, close]  # 开盘价与收盘价列表

plt.figure(figsize=(10, 6))

# 绘制折线图
plt.plot(times, prices, label="GBP/USD Price", marker='o')

# 设置标题与标签
plt.title("GBP/USD Real-time Price")
plt.xlabel("Time")
plt.ylabel("Price")

# 显示图例
plt.legend()

# 显示图形
plt.show()

第四步：在 APP 中集成

为了在 APP 中展示图形，通常使用前端开发框架，比如 React 或 Flutter，并将后端数据通过 API 提供给前端展示。你可以通过 WebSocket 或 HTTP 请求来实时获取数据，并更新数据展示。

4.1 前端示例（使用 JavaScript）

假设你使用 JavaScript 进行前端开发，可以通过 AJAX 请求来定时获取外汇数据并更新图形。

// 使用AJAX请求外汇数据
fetch('https://data.infoway.io/common/batch_kline/5/1/GBPUSD', {
    method: 'GET',
    headers: {
        'User-Agent': 'Mozilla/5.0',
        'Accept': 'application/json',
        'apiKey': 'YOUR_API_KEY'
    }
})
.then(response => response.json())
.then(data => {
    const time = data.t;
    const price = data.c;

    // 更新图表
    updateChart(time, price);
});

// 更新图表的函数
function updateChart(time, price) {
    // 例如使用Chart.js来绘制图表
    chart.data.labels.push(time);
    chart.data.datasets[0].data.push(price);
    chart.update();
}

第五步：实时更新

为了实现实时更新，你可以定时获取数据并刷新图表。前端可以每分钟或更短时间获取一次新的行情数据并展示在看板上。

setInterval(() => {
    fetch('https://data.infoway.io/common/batch_kline/5/1/GBPUSD', {
        method: 'GET',
        headers: {
            'User-Agent': 'Mozilla/5.0',
            'Accept': 'application/json',
            'apiKey': 'YOUR_API_KEY'
        }
    })
    .then(response => response.json())
    .then(data => {
        const time = data.t;
        const price = data.c;

        updateChart(time, price);
    });
}, 60000);  // 每60秒获取一次数据

通过以上步骤，我们完成了从获取外汇数据到在数据看板上展示图形的全过程。你可以将这些步骤集成到你的 APP 中，通过 API 获取实时外汇行情，并使用图形化展示为用户提供直观的实时数据。