使用 KlineCharts 对接 StockTV 印度股票 K 线数据的完整实施方案。
核心步骤
- 获取股票 PID：首先需要通过“市场列表”接口找到具体印度股票的 ID (
pid)。 - 请求 K 线数据：使用
/stock/kline接口获取历史数据。 - 数据清洗：将 StockTV 的返回格式转换为 KlineCharts 要求的格式。
- 渲染图表：初始化 KlineCharts 并填充数据。
1. 准备工作：获取印度股票 PID
在请求 K 线之前，您必须知道股票的 pid（产品 ID）。
根据 API 文档，印度市场的 countryId 为 14。
API 请求示例 (查找 Reliance Industries):
GET https://api.stocktv.top/stock/stocks?countryId=14&pageSize=10&page=1&key=您的KEY
假设返回结果中某个股票的 id 为 12345，这就是我们需要的 pid。
2. 完整代码示例 (HTML + JS)
您可以直接创建一个 .html 文件，将以下代码复制进去。代码中包含了从 API 获取数据、格式转换以及渲染图表的完整逻辑。
注意：请将代码中的 YOUR_API_KEY 替换为您从 StockTV 获取的真实 Key。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>StockTV 印度股票 K线图 (KlineCharts)</title><script src="https://cdn.jsdelivr.net/npm/klinecharts/dist/klinecharts.min.js"></script><style>body { margin: 0; padding: 0; font-family: sans-serif; }#chart-container { width: 100%; height: 600px; }.controls { padding: 10px; background: #f0f0f0; display: flex; gap: 10px; align-items: center; }</style>
</head>
<body><div class="controls"><h3>印度股票示例</h3><button onclick="loadData(17940, 'P1D')">加载 Nifty 50 (日K)</button><button onclick="loadData(17940, 'PT1H')">加载 Nifty 50 (1小时)</button></div><div id="chart-container"></div><script>// 1. 初始化图表const chart = klinecharts.init('chart-container');// 2. 配置参数const API_BASE = 'https://api.stocktv.top';const API_KEY = '您的KEY'; // TODO: 请在此处填入您的 Key/*** 加载并渲染数据* @param {number} pid - 股票/指数的产品ID* @param {string} interval - 周期 (PT1M, PT15M, PT1H, P1D, P1W, P1M)*/async function loadData(pid, interval) {if (API_KEY === '您的KEY') {alert('请在代码中配置您的 API Key');return;}try {// 显示加载中...chart.createIndicator('VOL'); // 确保显示成交量// 3. 构建 URLconst url = `${API_BASE}/stock/kline?pid=${pid}&interval=${interval}&key=${API_KEY}`;console.log(`正在请求: ${url}`);const response = await fetch(url);const result = await response.json();if (result.code !== 200) {console.error('API Error:', result.message);alert(`API 错误: ${result.message}`);return;}// 4. 数据转换 (关键步骤)// StockTV 返回格式: { time, open, high, low, close, volume }// KlineCharts 需要格式: { timestamp, open, high, low, close, volume }const chartData = result.data.map(item => {return {timestamp: item.time, // StockTV 返回的是毫秒时间戳，直接可用open: Number(item.open),high: Number(item.high),low: Number(item.low),close: Number(item.close),volume: Number(item.volume)};});// 按时间排序（防止 API 返回乱序）chartData.sort((a, b) => a.timestamp - b.timestamp);// 5. 设置数据到图表chart.applyNewData(chartData);console.log(`成功加载 ${chartData.length} 条数据`);} catch (error) {console.error('Fetch Error:', error);alert('请求失败，请检查控制台网络日志');}}// 页面加载默认加载一次数据// 17940 是文档中的 Nifty 50 指数 ID，日线loadData(17940, 'P1D'); // 响应式调整大小window.addEventListener('resize', () => {chart.resize();});</script>
</body>
</html>
3. 关键对接说明
A. 字段映射 (Data Mapping)
根据您的 Postman 文件中的 /stock/kline 响应示例，字段对接如下：
| StockTV 字段 | 说明 | KlineCharts 字段 | 处理方式 |
|---|---|---|---|
time |
时间戳 (1719818400000) | timestamp |
直接赋值 (Key名称不同) |
open |
开盘价 | open |
建议 Number() 转换 |
high |
最高价 | high |
建议 Number() 转换 |
low |
最低价 | low |
建议 Number() 转换 |
close |
收盘价 | close |
建议 Number() 转换 |
volume |
成交量 | volume |
建议 Number() 转换 |
B. 周期参数 (interval)
StockTV 使用 ISO 8601 风格的时间周期格式，在调用 loadData 时需要传入正确的字符串：
- 5分钟:
PT5M - 15分钟:
PT15M - 30分钟:
PT30M - 1小时:
PT1H - 1天:
P1D - 1周:
P1W - 1月:
P1M
4. 进阶建议：WebSocket 实时更新
您的文档中包含 【股票】WebSocket 接口。若要让 K 线图实时跳动，您需要在 applyNewData 之后，使用 WebSocket 监听该 PID 的推送，并使用 KlineCharts 的 updateData() 方法更新最后一条数据。
WebSocket 更新逻辑简述：
- 连接
wss://ws-api.stocktv.top/connect?key=...。 - 接收消息，判断
pid是否匹配当前图表。 - 构造数据对象
{ timestamp, open, high, low, close, volume }。 - 调用
chart.updateData(newData)。
![[H3C/华三]Super VLAN技术简述与配置](http://pic.xiahunao.cn/[H3C/华三]Super VLAN技术简述与配置)
