您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

Web 股票 K 線圖與十字光標指示器實現技術棧解析

編輯：程式設計綜合問答

核心技術選型

層級	方案	代表庫/工具
渲染引擎	Canvas 2D / WebGL / SVG	Canvas 2D 輕量、WebGL 高性能、SVG 交互友好
圖表庫	成熟開源庫	ECharts、Highcharts、TradingView Lightweight Charts、uCharts、Apache ECharts
數據源	WebSocket / SSE / REST 分頁	實時推送或定時輪詢
十字光標/Tooltip	滑鼠移動事件 + 坐標映射 + 數據插值	庫內建或自定義 Canvas 繪製

主流庫對比

ECharts：百度出品，功能全、生態豐富，支援 K 線、十字光標、標記、數據區縮放，tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } } 一行配置實現指示線。
TradingView Lightweight Charts：專為金融圖表設計，體積 < 50KB，原生支援 K 線、成交量、十字光標、懸浮提示，TypeScript 優先，性能極佳。
Highcharts：商業友好（免費非商用），API 成熟，股票圖模組 Highcharts.stockChart 開箱即用。

最小原型：ECharts K 線 + 十字光標

<div id="chart" style="width:100%; height:500px"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, // 十字光標
    xAxis: { type: 'category', data: [] },
    yAxis: { type: 'value', scale: true },
    series: [{ type: 'candlestick', data: [] }],
    dataZoom: [{ type: 'inside' }, { type: 'slider' }]
};
chart.setOption(option);

// WebSocket 接收實時 K 線
var ws = new WebSocket('wss://api.example.com/kline');
ws.onmessage = function(e) {
    var k = JSON.parse(e.data); // {t: timestamp, o,h,l,c: prices}
    chart.appendData([{ seriesIndex: 0, data: [[k.t, k.o, k.c, k.l, k.h]] }]);
};
</script>

進階功能點

數據插值：光標落在兩個 K 線之間時，線性插值顯示理論價格。
多周期切換：1分/5分/日線數據分離請求，圖表 setOption({ series: [{ data: newData }] }) 熱更新。
技術指標面板：MACD、KDJ、BOLL 等獨立 Y 軸繪製，同步十字光標位置。
大數據優化：WebGL 渲染（ECharts GL）、數據抽樣（LTTB）、虛擬滾動。

學習資源

ECharts 官方示例：K 線圖專區
TradingView Lightweight Charts 教程：官網文檔
《WebGL 程式設計指南》—— 底層渲染原理

總結

不用重複造輪子，**直接使用 ECharts 或 TradingView Lightweight Charts**，配置 tooltip.axisPointer.type='cross' 即得十字光標。核心精力應放在實時數據清洗、WebSocket 重連、多周期同步、指標計算等業務邏輯上。