roshanca / Stock Chart
Licence: mit
基于 canvas 的沪深两市股票分时 K 线图
Stars: ✭ 170
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Stock Chart
Klinechart
📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.（可高度自定义的轻量级k线图，无第三方依赖，支持移动端）
Stars: ✭ 303 (+78.24%)
Mutual labels: stock, chart, canvas
Hqchart
HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口
Stars: ✭ 1,126 (+562.35%)
Mutual labels: stock, chart, canvas
jqCandlestick
jQuery plugin for creating line, bar and candlestick charts.
Stars: ✭ 13 (-92.35%)
Mutual labels: chart, canvas
Wx Charts
微信小程序图表charts组件，Charts for WeChat Mini Program
Stars: ✭ 4,633 (+2625.29%)
Mutual labels: chart, canvas
Tui.chart
🍞📊 Beautiful chart for data visualization.
Stars: ✭ 5,041 (+2865.29%)
Mutual labels: chart, canvas
d3-kagi
An open source javascript library to render beautiful Kagi charts using D3.js and pure Javascript
Stars: ✭ 26 (-84.71%)
Mutual labels: chart, stock
okeevis-render
a fast lightweight 2d graphic library
Stars: ✭ 22 (-87.06%)
Mutual labels: chart, canvas
Hycharts
柱状图、折/曲线图、K线图（主图、交易量图、辅助图), 图与图可以自由组合, 支持分页加载数据 -----> 低内存、低耗电、滑动缩放顺滑
Stars: ✭ 394 (+131.76%)
Mutual labels: stock, chart
Luckysheet
Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.
Stars: ✭ 9,772 (+5648.24%)
Mutual labels: chart, canvas
StockView
股票相关控件（分时图、五日分时图、自选股迷你分时图、资金趋势图、盈亏额/盈亏率）- （曲线图、折线图）
Stars: ✭ 87 (-48.82%)
Mutual labels: chart, stock
Zeu
A JavaScript library for real-time visualization
Stars: ✭ 1,777 (+945.29%)
Mutual labels: chart, canvas
ChartTheStockMarket
🔥 📈 💸 Chart the Stock Market - FCC Challenge
Stars: ✭ 39 (-77.06%)
Mutual labels: chart, stock
awesome-canvas
Canvas资源库大全中文版。An awesome Canvas packages and resources.
Stars: ✭ 288 (+69.41%)
Mutual labels: chart, canvas
Chart.js
Simple HTML5 Charts using the <canvas> tag
Stars: ✭ 55,646 (+32632.94%)
Mutual labels: chart, canvas
Clchart
A fast, simple and cross-platform(html5 react-native weex wechat-applet) stock chart library created using canvas.
Stars: ✭ 250 (+47.06%)
Mutual labels: chart, canvas
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: ✭ 175 (+2.94%)
Mutual labels: chart, canvas
Kschart
k线图/kline/kchart，已经集成MA/EMA/MACD/KDJ/BOLL/RSI/WR/AVG等指标，新增指标及其方便。适用于股票/区块链交易所等种类App。Swift5编写，CPU/内存占用率极低，60FPS稳定运行。示例集成websocket，并接入币安数据（需VPN）。
Stars: ✭ 909 (+434.71%)
Mutual labels: stock, chart
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-10.59%)
Mutual labels: chart, canvas
stock-chart
既然是沪深两市的股票，就没必要写英文文档了╮(╯_╰)╭
- 分时支持均线量线
- K 线支持 MA 均线（可自定义多条）
- 样式主要参考蚂蚁聚宝与支付宝中的股票行情图，可定制
使用的例子
http://h5.vstock.cairenhui.com/
用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<canvas id="trendLine"></canvas>
<canvas id="kLine"></canvas>
<script src="path/to/js/stock-chart.js">
<script>
// 分时
StockChart.drawTrendLine({
id: 'trendLine',
width: document.body.clientWidth - 20,
height: 180,
prices: prices,
volumes: volumes,
avgPrices: avgPrices,
preClosePrice: 9.66
});
// K 线
StockChart.drawKLine({
id: 'kLine',
width: document.body.clientWidth - 20,
height: 180,
ohlcPrices: ohlcPrices,
volumes: volumes,
dates: dates,
maLists: [
{
title: 'MA5',
prices: ma5Prices
},
{
title: 'MA10',
prices: ma10Prices
},
{
title: 'MA20',
prices: ma20Prices
}
],
period: 0
});
<script>
</body>
</html>
配置说明
id {string}
canvas 元素的 id
width {number}
图表宽度，默认是 body 宽度：document.body.clientWidth
height {number}
图表高度
volumes {number[]}
量线数据，例如：[415200, 1616900, 753646, 717437, ... ]
volumeHeight {number}
量线图高度，默认值为 30
figureOffsetY {number}
图表顶部留白，用与显示坐标文字等，默认值为 20
textOffsetY {number}
文字垂直方向上的间隔，默认值为 2
axisTextHeight {number}
横座标文本区域高度，默认值为 10
grid {object}
由三个属性组成：
- x {number}: 横向网格线条数，默认为 4
- y {number}: 纵向网格线条数， 默认为 4
- color {string}: 网格线颜色，默认为
rgba(221,221,221,1)
textColor {string}
普通文本字色，默认值为 rgba(138,138,138,1)
lineColor {string}
普通线条颜色，默认值为 rgba(94,168,199,1)
以上是一些公共的配置
分时特有配置：
prices {number[]}
价格数据，例如：[9.8, 9.79, 9.76, 9.92, 10.14, 10.2, 10.1, ... ]
avgPrices {number[]}
均线数据
preClosePrice {number}
股票昨收价
fillColor {string}
分时图价格曲线与横座标之间的填充色，默认值为 rgba(187,226,246,.5)
volumeColor {string}
量线颜色，这里使用单色，默认值为 rgba(130,152,200,1)
avgLineColor {string}
均线颜色，默认值为 rgba(169,77,180,.5)
middleLineColor {string}
中间虚线（代表昨收价）的颜色，默认值为 rgba(112,179,215,1)
isIndex {boolean}
是否为指数型股票，比如上证指数、深证成指、创业板指等，指数型股票的分时图默认不显示均线
K 线特有配置：
ohlcPrices {object[]}
一组蜡烛图价格数据，单个蜡烛图价格由以下四个部分组成：
- o {number}: 开盘价
- h {number}: 最高价
- l {number}: 最低价
- c {number}: 收盘价
dates {string []}
蜡烛图对应的日期数据，一般为 ["2016-06", "2016-06", "2016-07", ... ] 这种形式
dataCount {number}
K 线数据往往比较多，这里的 dataCount 为实际画图采用的数据点数，默认值为 50。当然，对于一些新股，数据少于 dataCount 的，会自动忽视 dataCount
period {number}
- 0 为日 K
- 1 为周 K
- 2 为月 K
这里应该只是对横座标的显示和网格线有所影响
maLists {object[]}
maLists: [
{
title: 'MA5',
prices: ma5Prices
},
{
title: 'MA10',
prices: ma10Prices
},
{
title: 'MA20',
prices: ma20Prices
}
]
可自定义均线，这里的 ma5Prices， ma10Prices，ma20Prices 为用户传入的均线数据，格式同分时的 prices
riseColor {string}
遇涨股票的颜色，默认值为 rgba(252,63,29,1)
fallColor {string}
遇跌股票的颜色，默认值为 rgba(85,170,48,1)
Todos
- [ ] 复权与不复权切换
- [ ] 大屏优化
- [ ] touch 交互支持
- [ ] 动态描点（分时）
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].