使用 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. 構建 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)。
