English | 简体中文 |
npm i @vanyi/kline
Browser:
<link rel="stylesheet" href="path/to/kline.min.css">
<script src="path/to/kline.min.js"></script>
Module:
import VyKline from '@vanyi/kline';
import '@vanyi/kline/lib/kline.min.css;'
VyKline.bootstrap(options)
,option: Object
;options
:
container
Chart mount point type: HTMLElement
;deedfeeds
Data feedback object type: Object
,See below for detailed configuration;defaultInterval
Default time granularity type: String
,See below for detailed configuration;interval
Time granularity collection type: Array
,defaultInterval’s collection;theme
theme type: String
, Optional light | dark
, default:light
;customChart
Custom chart configuration type: Object
,See below for detailed configuration;customLoadingEl
Custom loading node type: HTMLElement
, Optional,The style needs to be set to absolute positioning, width and height 100%;chartType
Chart type type: String
, Optional KLINE | EMPTY_KLINE
,default KLINE
;showIntervalToolbar
Whether to display the time granularity bar type: Boolean
Optional,default true
;lang
Language type: String
, Optional zhCN | enUS
, default zhCN
;onTimeIntervalChanged
This event is triggered when the time granularity is switched,The parameter is time granularity type: Function
,Optional.deedfeeds
Data feedback object,enter data for the chart.setHistoryData({ interval, setHistoryData, subscribeData })
Set historical datainterval
Current time granularitysetHistoryData
Callback,Parameters are historical data Array
,Standard data objects are as follows:
{
time: null, // 1590314400000
open: null,
high: null,
low: null,
close: null,
volume: null // Trading volume
}
> `getRealTimeData` Callback,Parameters are standard data objects,Same as above.
intervalChanged({ interval, setHistoryData, subscribeData })
Triggered when time granularity is switched,Note: Here you should unsubscribe before getting historical data
>interval
Current time granularitysetHistoryData
Callback,Parameters are historical data Array
subscribeData
Callback,The parameter is the current data object Object
defaultInterval
Default time granularity,format: 'm1','h1', 'd1', 'w1', 'M1'
Corresponding to minute, hour, day, week, month
customChart
Chart custom configuration object:
{
default_rise_color: '#53b987', // rise
default_fall_color: '#eb4d5c', // fall
init_offset_x: 100, // Initial chart offset
volume_height: 100, // Trading volume height
interval_tool_bar: '30px', // Time granularity bar default height
}
switchChartType Switch chart type,paramType: String Optional value:KLINE |
EMPTY_KLINE |
switchTheme Switch theme,paramType: String Optional value:light |
dark |
switchLang Switch language,paramType: String Optional value:zhCN |
enUS |
Mainstream browser
MIT
Copyright (c) 2020 Vanyi0924
https://vanyi0924.github.io/kline/
The chart is completely driven by data, and only focuses on the introduction of data, so as long as you access the data that meets the standards.The example uses the websocket
way,Thankshuobifor the data interface provided.
This is a project developed and maintained by virtue of personal interests, hobbies and sense of responsibility,If it can bring you a little help,please star to let more people know it,Thank you!Community support is my motivation.(づ ̄3 ̄)づ╭❤~
/src/config/theme
)