当前位置：首页 > news >正文

KlineCharts对接股票k线数据股票数据源API

news 2026/6/15 4:14:12

使用 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()` 转换