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

使用 KlineCharts 对接 StockTV 印度股票 K 线数据 的完整实施方案。

核心步骤

获取股票 PID ：首先需要通过"市场列表"接口找到具体印度股票的 ID (pid)。
请求 K 线数据 ：使用 /stock/kline 接口获取历史数据。
数据清洗：将 StockTV 的返回格式转换为 KlineCharts 要求的格式。
渲染图表：初始化 KlineCharts 并填充数据。

1. 准备工作：获取印度股票 PID

在请求 K 线之前，您必须知道股票的 pid（产品 ID）。

根据 API 文档，印度市场的 countryId 为 14。

API 请求示例 (查找 Reliance Industries):

http 复制代码

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。

html 复制代码

<!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. 构建 URL
                const 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)。

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