React K 线图组件 kline-charts-react 介绍与使用
一个 prop 画出专业 K 线图,数据获取和指标计算全自动。
背景与动机
需求很简单 —— 在一个 React 项目里加一个股票 K 线图,要能切周期、看指标、支持缩放拖拽。听起来是不是很基础?
然后我开始找现成方案。TradingView 的 Lightweight Charts 不错,但免费版功能有限,而且它不是 React 组件,得自己封装一层。npm 上搜 'react kline' 或者 'react candlestick',出来的结果要么年久失修,要么只是个 demo 级别的东西,拿来用还不如自己写。
既然找不到趁手的,那就自己搞一个。顺便把它做得通用一点,发出来给大家省点时间。
功能概览
项目名叫 kline-charts-react,MIT 开源。

上手非常简单:
import { KLineChart } from 'kline-charts-react';
import 'kline-charts-react/style.css';
function App() {
return <KLineChart symbol="sh600519" height={600} />;
}
就这些。传一个股票代码,组件会自动拉取数据、计算技术指标、渲染出完整的 K 线图。
主要功能
对标了一下雪球的交互,主要功能包括:
周期全覆盖 —— 分时、五日分时、日 K、周 K、月 K,加上 1/5/15/30/60 分钟线,看长线看短线都行。
15 种技术指标 —— MA、BOLL、MACD、KDJ、RSI、WR、BIAS、CCI、ATR、OBV、ROC、DMI、SAR、KC,全部前端实时计算。你选了哪些指标,Tooltip 里就展示哪些指标的值,主图副图都有。
丰富的交互 —— 鼠标滚轮缩放、拖拽平移、十字准线、数据 Tooltip、缩放历史撤销/重做、全屏模式、导出图片。
主题切换 —— 内置明暗两套主题,也接受自定义颜色对象,想配成什么风格都行。
复权处理 —— 前复权、后复权、不复权,默认前复权。看长期走势的时候前复权是标配。


