Sive
KLineChart 股票图组件库
可视化官方精选

KLineChart 股票图组件库

当用户需要构建证券、期货或加密资产行情界面，或明确要求 KLineChart 时，使用此 Skill。该库擅长：实体蜡烛图、描边蜡烛图、上涨描边蜡烛图、下跌描边蜡烛图、美国线/OHLC 图、面积分时图；移动平均线、指数移动平均线、简单移动平均线、多空指数、成交量、指数平滑异同移动平均线、布林带、随机指标、相对强弱指标、乖离率、情绪指标、顺势指标、趋向指标、能量指标、心理线、平行线差指标、三重指数平滑平均线、能量潮、成交量变异率、威廉指标、动量指标、简易波动指标、抛物线转向指标、动量震荡指标、变动率指标、量价趋势指标、平均价格。不要用于普通时间序列折线图、非金融仪表盘或通用 3D 可视化。

去使用
liihuu
liihuu
浏览618
使用59

Skill 文件

SKILL.md
name
klinechart-viz
title
KLineChart 股票图组件库
description
当用户需要构建证券、期货或加密资产行情界面，或明确要求 KLineChart 时，使用此 Skill。该库擅长：实体蜡烛图、描边蜡烛图、上涨描边蜡烛图、下跌描边蜡烛图、美国线/OHLC 图、面积分时图；移动平均线、指数移动平均线、简单移动平均线、多空指数、成交量、指数平滑异同移动平均线、布林带、随机指标、相对强弱指标、乖离率、情绪指标、顺势指标、趋向指标、能量指标、心理线、平行线差指标、三重指数平滑平均线、能量潮、成交量变异率、威廉指标、动量指标、简易波动指标、抛物线转向指标、动量震荡指标、变动率指标、量价趋势指标、平均价格。不要用于普通时间序列折线图、非金融仪表盘或通用 3D 可视化。

KLineChart 可视化组件库

基于 的轻量级、高性能金融图表组件库，支持 K 线图、技术指标、画线工具等丰富功能。

注意: 本文档适用于 v10.x 版本，使用稳定成熟的 API。

特性概览

特性说明
零依赖不依赖第三方库，体积小巧
高性能支持大数据量流畅渲染
全功能K 线、技术指标、画线、标注
移动端完美支持触控交互
主题化内置明暗主题，支持自定义
国际化支持多语言切换

核心能力

1. 图表类型

类型英文名使用场景
实体蜡烛图CandleSolid标准 K 线图，涨跌填充色
描边蜡烛图CandleStroke仅边框，无填充
上升描边CandleUpStroke阳线描边，阴线填充
下降描边CandleDownStroke阴线描边，阳线填充
美国线OHLCBar开盘价-最高价-最低价-收盘价
面积图Area趋势展示

2. 技术指标（内置 30+）

类别指标名称
趋势MA, EMA, SMA, WMA, BOLL
动量MACD, RSI, KDJ, CCI, WR
波动ATR, BIAS, BRAR
量能VOL, OBV, DMI

3. 画线工具（Overlay）

  • 线段：线段、直线、射线、水平/垂直线
  • 形态：平行通道、斐波那契回调、斐波那契扇形/扩展
  • 标注：文字标注、价格标签
  • 测量：价格区间、时间区间

快速开始

安装

bash
npm install klinecharts# 或yarn add klinecharts

CDN 引入

html
<​script src="https://cdn.jsdmirror.com/npm/klinecharts@10/dist/umd/klinecharts.min.js"​><​/script​>

基础用法

javascript
import { init } from 'klinecharts'
// 初始化图表const chart = init('chart-container')
// 应用样式chart.setStyles({  candle: {    type: 'candle_solid',    upColor: '#26a69a',      // 阳线颜色    downColor: '#ef5350',    // 阴线颜色    upBorderColor: '#26a69a',    downBorderColor: '#ef5350'  }})// 设置交易对chart.setSymbol({  ticker: 'BABA',  pricePrecision: 2  volumePrecision: 0})// 设置周期chart.setPeriod({ type: 'day', span: 1 })// 设置数据加载器chart.setDataLoader({  getBars: ({ callback }) => {    callback([      {        timestamp: 1704067200000,  // 时间戳（毫秒）        open: 100.5,               // 开盘价        high: 105.2,               // 最高价        low: 98.3,                 // 最低价        close: 103.8,              // 收盘价        volume: 15000              // 成交量（可选）      },      {        timestamp: 1704153600000,        open: 103.8,        high: 107.5,        low: 102.0,        close: 106.2,        volume: 18000      }      // ... 更多数据    ])  }})

配置选项

样式配置 (Styles)

javascript
{  // === 网格 ===  grid: {    show: true,    horizontal: {      show: true,      size: 1,      color: '#E0E0E0',      style: 'dashed',      // solid | dashed      dashedValue: [2, 2]    },    vertical: {      show: true,      size: 1,      color: '#E0E0E0',      style: 'dashed'    }  },
  // === 蜡烛图 ===  candle: {    type: 'candle_solid',   // candle_solid | candle_stroke | candle_up_stroke | candle_down_stroke | ohlc | area    upColor: '#26a69a',    downColor: '#ef5350',    upBorderColor: '#26a69a',    downBorderColor: '#ef5350',    upWickColor: '#26a69a',    downWickColor: '#ef5350',    tooltip: {      showRule: 'follow_cross',  // always | follow_cross | none      rect: {        paddingLeft: 8,        paddingRight: 8,        paddingTop: 4,        paddingBottom: 4,        fillColor: 'rgba(255, 255, 255, 0.9)',        borderColor: '#D9D9D9',        borderSize: 0.5,        radius: 4      },      text: {        size: 12,        family: 'Arial',        color: '#666',        marginLeft: 8,        marginTop: 4      },      legend: ['时间', '开', '高', '低', '收', '涨跌幅', '成交额']    }  },
  // === 价格线 ===  priceMark: {    show: true,    high: { show: true, color: '#26a69a', textColor: '#FFF', textSize: 10 },    low: { show: true, color: '#ef5350', textColor: '#FFF', textSize: 10 },    last: {      show: true,      upColor: '#26a69a',      downColor: '#ef5350',      noChangeColor: '#888',      line: { show: true, style: 'dashed', dashedValue: [4, 4], size: 1 },      text: { show: true, color: '#FFF', size: 12, paddingLeft: 4, paddingTop: 2, paddingRight: 4, paddingBottom: 2, borderSize: 0.5, borderRadius: 2 }    }  },
  // === 坐标轴 ===  xAxis: {    show: true,    size: 24,    axisLine: { show: true, color: '#D9D9D9', size: 0.5 },    tickLine: { show: true, size: 2, color: '#D9D9D9' },    tickText: { show: true, color: '#999', family: 'Arial', size: 10, paddingTop: 4 }  },
  yAxis: {    show: true,    size: 48,    position: 'right',      // left | right    type: 'normal',         // normal | percentage | log    axisLine: { show: true, color: '#D9D9D9', size: 0.5 },    tickLine: { show: true, size: 2, color: '#D9D9D9' },    tickText: { show: true, color: '#999', family: 'Arial', size: 10, paddingLeft: 2, paddingRight: 2 }  },
  // === 分隔线 ===  separator: {    size: 1,    color: '#D9D9D9',    show: true  },
  // === 十字光标 ===  crosshair: {    show: true,    horizontal: {      show: true,      line: { show: true, style: 'dashed', dashedValue: [4, 4], size: 0.5, color: '#8c8c8c' },      text: { show: true, color: '#FFF', size: 10, family: 'Arial', paddingLeft: 4, paddingRight: 4, paddingTop: 2, paddingBottom: 2, borderSize: 0.5, borderColor: '#8c8c8c', borderRadius: 2, backgroundColor: '#8c8c8c' }    },    vertical: {      show: true,      line: { show: true, style: 'dashed', dashedValue: [4, 4], size: 0.5, color: '#8c8c8c' },      text: { show: true, color: '#FFF', size: 10, family: 'Arial', paddingLeft: 4, paddingRight: 4, paddingTop: 2, paddingBottom: 2, borderSize: 0.5, borderColor: '#8c8c8c', borderRadius: 2, backgroundColor: '#8c8c8c' }    }  }}

推荐主题配置

深色主题

javascript
chart.setStyles('dark')

浅色主题

javascript
chart.setStyles('light')

自定义主题

javascript
chart.setStyles({  candle: {    upColor: '#00C853',    downColor: '#FF5252',    upBorderColor: '#00C853',    downBorderColor: '#FF5252'  }})

常用 API

实例方法

javascript
// 初始化const chart = init('container', { styles: {}, locale: 'zh-CN' })
// 设置交易对chart.setSymbol({  ticker: 'BABA',  pricePrecision: 2  volumePrecision: 0})// 设置周期chart.setPeriod({ type: 'day', span: 1 })// 设置数据加载器chart.setDataLoader({  // 获取历史数据  getBars({ type, timestamp, symbol, period, callback }) {  },  // 订阅实时数据  subscribeBar({ symbol, period, callback }) {  },  // 取消订阅实时数据  unsubscribeBar({ symbol, period }) {  }})// 获取当前数据列表chart.getDataList()    // 清空数据chart.clearData()               
// 创建指标chart.createIndicator('MA')// 移除指标chart.removeIndicator({ name: 'MA' })// 获取指标实例chart.getIndicators()// 覆盖指标chart.overrideIndicator({  name: 'MA',  calcParams: [5,20]  })
// 创建画线chart.createOverlay({ name: type, points, lock: false })  // 移除画线chart.removeOverlay({ id })       // 更新画线chart.overrideOverlay(overlay) // 获取画线列表chart.getOverlays()                                       
// 启用/禁用缩放chart.setZoomEnabled(enabled)    // 启用/禁用滚动chart.setScrollEnabled(enabled)       // 设置右侧留白距离chart.setOffsetRightDistance(distance) 
// 设置全局样式chart.setStyles(styles)      // 获取当前样式chart.getStyles()          // 设置语言chart.setLocale(locale)                 
// 销毁图表实例dispose(chart)

技术指标配置示例

移动平均线 (MA)

javascript
// 使用 createIndicator(indicator, isStack)// isStack: true 叠加在主图，false 创建新面板chart.createIndicator({  name: 'MA',  // 计算周期  calcParams: [5, 10, 20, 60]}, false)

MACD

javascript
chart.createIndicator('MACD'）

成交量 (VOL)

javascript
chart.createIndicator('VOL'）

画线工具示例

创建趋势线

javascript
// createOverlay 接收配置对象chart.createOverlay({  name: 'segment',  points: [    { timestamp: 1704067200000, value: 100 },    { timestamp: 1704153600000, value: 105 }  ],  lock: false  // 是否锁定不可编辑})

创建水平线

javascript
chart.createOverlay('horizontalLine', [  { value: 100.5 }])

创建射线

javascript
chart.createOverlay('rayLine', [  { timestamp: 1704067200000, value: 100 },  { timestamp: 1704153600000, value: 105 }])

创建平行通道

javascript
chart.createOverlay({  name: 'parallelStraightLine',  points: [    { timestamp: 1704067200000, value: 100 },    { timestamp: 1704153600000, value: 105 }  ]})

实时数据更新

javascript
chart.setDataLoader({  // 获取历史数据  getBars({ type, timestamp, symbol, period, callback }) {    fetch(`/api/klines?symbol=${symbol.ticker}&type=${period.type}&span=${period.span}`)    .then(res => res.json())    .then(data => {      callback(data)    })  },  // 订阅实时数据  subscribeBar({ symbol, period, callback }) {    ws.onmessage = (event) => {      const tick = JSON.parse(event.data)      callback(tick)    }  },  // 取消订阅实时数据  unsubscribeBar({ symbol, period }) {  }})

Vue3 / React 集成

Vue3 组合式

vue
<​template​>  <​div ref="chartContainer" class="kline-chart"​><​/div​><​/template​>
<​script setup​>import { ref, onMounted, onUnmounted, watch } from 'vue'import { init, dispose } from 'klinecharts'
const chartContainer = ref(null)let chart = null
onMounted(() => {  chart = init(chartContainer.value, {    styles: { /* 主题配置 */ }  })  chart.setSymbol({    ticker: 'BABA',    pricePrecision: 2    volumePrecision: 0  })  chart.setPeriod({ type: 'day', span: 1 })  chart.setDataLoader({    // 获取历史数据    getBars({ type, timestamp, symbol, period, callback }) {      fetch(`/api/klines?symbol=${symbol.ticker}&type=${period.type}&span=${period.span}`)      .then(res => res.json())      .then(data => {        callback(data)      })    },    // 订阅实时数据    subscribeBar({ symbol, period, callback }) {      ws.onmessage = (event) => {        const tick = JSON.parse(event.data)        callback(tick)      }    },    // 取消订阅实时数据    unsubscribeBar({ symbol, period }) {    }  })})
onUnmounted(() => {  dispose(chart)})<​/script​>
<​style​>.kline-chart {  width: 100%;  height: 500px;}<​/style​>

React Hooks

jsx
import { useEffect, useRef } from 'react'import { init, dispose } from 'klinecharts'
function KLineChart() {  const containerRef = useRef(null)  const chartRef = useRef(null)
  useEffect(() => {    chartRef.current = init(containerRef.current)    chartRef.current.setSymbol({      ticker: 'BABA',      pricePrecision: 2      volumePrecision: 0    })    chartRef.current.setPeriod({ type: 'day', span: 1 })    chartRef.current.setDataLoader({      // 获取历史数据      getBars({ type, timestamp, symbol, period, callback }) {        fetch(`/api/klines?symbol=${symbol.ticker}&type=${period.type}&span=${period.span}`)        .then(res => res.json())        .then(data => {          callback(data)        })      },      // 订阅实时数据      subscribeBar({ symbol, period, callback }) {        ws.onmessage = (event) => {          const tick = JSON.parse(event.data)          callback(tick)        }      },      // 取消订阅实时数据      unsubscribeBar({ symbol, period }) {      }    })        return () => dispose(chartRef.current)  }, [])
  return <​div ref={containerRef} style={{ width: '100%', height: 500 }} /​>}

数据格式

K 线数据项

typescript
interface KLineData {  timestamp: number;   // 时间戳（毫秒）  open: number;        // 开盘价  high: number;        // 最高价  low: number;         // 最低价  close: number;       // 收盘价  volume?: number;     // 成交量（可选）  turnover?: number;   // 成交额（可选）}

时间周期

ts
interface Period {  type: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'  span: number}

常见问题

Q: 如何隐藏默认图例？

javascript
chart.setStyles({  candle: { tooltip: { showRule: 'none' } }})

Q: 如何获取当前可见范围的数据？

javascript
const range = chart.getVisibleRange()// 返回 { from: number, to: number, realFrom: number, realTo: number }

完整示例

股票分析图表

html
<!DOCTYPE html><​html​><​head​>  <​script src="https://cdn.jsdmirror.com/klinecharts@9/dist/umd/klinecharts.min.js"​><​/script​>  <​style​>    #chart { width: 100%; height: 600px; }  <​/style​><​/head​><​body​>  <​div id="chart"​><​/div​>  <​script​>    const chart = klinecharts.init('chart')
    // 设置专业主题    chart.setStyles({      grid: {        horizontal: { color: '#F0F0F0' },        vertical: { show: false }      },      candle: {        upColor: '#089981',        downColor: '#F23645'      }    })    // 设置交易对    chart.setSymbol({      ticker: 'BABA',      pricePrecision: 2      volumePrecision: 0    })    // 设置周期    chart.setPeriod({ type: 'day', span: 1 })    chart.setDataLoader({      // 获取历史数据      getBars({ type, timestamp, symbol, period, callback }) {        fetch(`/api/klines?symbol=${symbol.ticker}&type=${period.type}&span=${period.span}`)        .then(res => res.json())        .then(data => {          callback(data)        })      },      // 订阅实时数据      subscribeBar({ symbol, period, callback }) {        ws.onmessage = (event) => {          const tick = JSON.parse(event.data)          callback(tick)        }      },      // 取消订阅实时数据      unsubscribeBar({ symbol, period }) {      }    })
    // 添加 MA 指标到主图    chart.createIndicator({      name: 'MA'      calcParams: [5, 10, 20, 60],      paneId: 'candle_pane'    })
    // 添加 MACD    chart.createIndicator('MACD')
    // 添加成交量    chart.createIndicator('VOL')
    // 添加一个画线示例    chart.createOverlay({      name: 'segment',      points: [        { timestamp: Date.now() - 86400000 * 30, value: 98 },        { timestamp: Date.now() - 86400000 * 28, value: 110 }      ]    })  <​/script​><​/body​><​/html​>

参考资源

  • GitHub:
  • 官方文档:
  • 在线示例:
  • NPM:
Ln 1, Col 1MarkdownSpaces: 2
No errors