bigo-chart
使用 canvas 绘制,可用于股票,基金,加密货币的轻量级交易图表库,支持分时图,蜡烛图
安装
npm install bigo-chart -S
快速使用
import BigoChart from "bigo-chart"
import "bigo-chart/dist/chart.css"
const option = {
el: "#chart",
bars,
symbol: "ETH",
hasVolume: true,
logo: "./logo.png",
chartType: 1,
}
const chart = new BigoChart(option)
效果展示
- 支持蜡烛图、分时图、交易量图。
- 支持视图缩放、拖拽、分页


配置
配置名称 | 配置说明 | 可选值 | 类型 |
---|
el | 图表容器 id,如:'#chart-container' | / | number |
bars | 历史行情数据 | { close: number; high: number; low: number; open: number; volume: number } | object |
symbol | 产品标识 | / | string |
logo | 公司 logo 路径 | / | string |
chartType | 图表类型 | 1: 分时图; 2: 蜡烛图 | number |
priceDigitNumber | 价格精度 | / | number |
volumeDigitNumber | 交易量精度 | / | number |
loadMore | 分页回调,接受一个参数 endTime | / | (endTime: number) => :bars |
API
subscribeBars(close, volume, time)
订阅数据,接受 3 个参数(当前行情, 当前新增的交易量, 当前时间),每次收到新数据都需要执行一次.
chart.setOption(option)
产生新的配置,bigo-chart 会将新配置项和老配置项进行合并取舍,由此产生新的图表样式.
GitHub
https://github.com/HDhuangdi/bigo-chart
LICENSE
MIT