KLineChart 可高度自定义的轻量级k线图 支持移动端

今天推荐的这个项目是「KLineChart」，可以高度自定义的轻量级 K 线图。

KLineChart 基于 html5 canvas 构建，默认支持几十种技术指标、多种图形标记且可自行扩展，默认支持多种画图模型且可自行扩展，无任何第三方依赖，支持移动端。

KLineChart 功能集

• 支持样式修改 (包括各种文字和线，主图类型，坐标轴类型及位置等等)
• 支持设置价格和数量精度
• 支持时区设置
• 支持缩放比例设置
• 支持禁止滚动和缩放
• 支持分段加载历史数据和实时更新
• 技术指标
• 内置几十种技术指标
• 支持主图设置多个技术指标类型
• 支持单独窗口展示 (理论上可以创建无数个窗口)
• 支持为窗口设置技术指标类型
• 支持为单个技术指标设置精度、样式和计算参数
• 支持自定义且能够自行绘制
• 图形标记
• 内置多种图形
• 支持根据鼠标动作去一步步地完成绘制
• 支持一步创建一个完整的图形
• 支持单独设置样式
• 支持自定义
• 支持图表动作监听
• 支持图表生成图片导出

快速开始

1、安装

• 使用 npmnpm install klinecharts --save
• 使用 yarnyarn add klinecharts

2、引入

// 全量引入，包含所有内置的技术指标和绘图标记
import { init } from 'klinecharts'
// 引入部分功能，不包含内置的绘图标记
import { init } from 'klinecharts/index.blank'
// 引入基础功能，不包含内置的技术指标和绘图标记
import { init } from 'klinecharts/index.simple'
// 以上三种方式根据需要，使用一种即可

3、创建第一个图表

import { init } from 'klinecharts'
// 初始化图表
const chart = init(`${domId}`)
// 为图表添加数据
chart.applyNewData([
{ close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
{ close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
{ close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
{ close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
{ close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
{ close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
{ close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
{ close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
{ close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
{ close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
])

看一下效果：

开源项目地址：
https://github.com/liihuu/KLineChart

示例代码地址：
https://github.com/liihuu/KLineChartSample

示例页面地址：
https://liihuu.github.io/KLineChart

开源项目作者：liihuu