npm install rn-klineimport { KLineChart } from "rn-kline";
// ...
<KLineChart
ref={kLineRef}
loading={loading}
style={styles.kline}
kLineState={kLineState}
onSlidLeft={onSlidLeft}
onSlidRight={onSlidRight}
dateTimeFormatter={dateTimeFormatter[period]}
selectedInfoLabels={labels.map((str) => `${t(str)} `)}
/>
/**
* @name 重置K线数据
* @param list K线数据
* @param resetShowPosition 重置K线显示位置`default true`,如不需重置K线传入`false`
* @param resetLastAnim 清楚最后一要柱子的动画,如果切换币需要使用方法传`true`
* @summary 用于初次获取到k线数据调用
*/
resetData(
list: KLineEntity[],
resetShowPosition?: boolean,
resetLastAnim?: boolean
): void;
/**
* @name 添加新数据
* @param data K线数据
* @param resetShowPosition 重置K线显示位置`default false`
* @summary 用于`WebSocket`实时推送过来的数据，需要自己判断是走`addNewData`还是`changeItem`
*/
addNewData(data: KLineEntity, resetShowPosition?: boolean): void;
/**
* @name 加载更多数据
* @param list K线数据
* @param resetShowPosition 重置K线显示位置`default false`
* @summary 用于滑动到最左侧加载更多数据调用
*/
addHistoryData(list: KLineEntity[], resetShowPosition?: boolean): void;
/**
* @name 改变某个点的值
* @param position 索引值
* @param data K线数据
* @summary 用于`WebSocket`实时推送过来的数据，需要自己判断是走`addNewData`还是`changeItem`
*/
changeItem(position: Int32, data: KLineEntity): void;/**
* 主图MA/BOLL切换
* @enum `MainDrawType`
*/
mainDrawType?: Int32;
/**
* 子图指标图切换
* @enum `IndexdDrawType`
*/
indexdDrawType?: Int32;
/**
* K线与分时线切换
* @enum `KLineState`
*/
kLineState?: Int32;
/**
* 设置十字线触发模式
* @enum SelectedTouchModle
*/
selectedTouchModle?: Int32;
/**
* 主视图所占高度比例 占比,用0-1之间的数表示
*/
mainPresent?: Float;
/**
* 成交量视图所占高度比例 占比,用0-1之间的数表示
*/
volPresent?: Float;
/**
* 切换显示/隐藏交易量
*/
volShowState?: boolean;
/**
* 设置交易量绘制 BarChart/LineChart
* @enum VolChartType
*/
volChartStatues?: Int32;
/**
* 是否隐藏信息框 默认false
*/
hideMarketInfoBox?: boolean;
/**
* 网格列
*/
gridColumns?: Int32;
/**
* 网格行
*/
gridRows?: Int32;
/**
* Slide left K line inside indent width
*/
overScrollRange?: Float;
/**
* Y值精度格式化 `%.03f`
*/
valueFormatter?: string;
/**
* 成交量格式化 `%.03f`
*/
volFormatter?: string;
/**
* 时间格式化 `yyyy-MM-dd hh:mm`
*/
dateTimeFormatter?: string;
/**
* 主视图Formatte `%.03f`
*/
mainValueFormatter?: string;
/**
* 设置选中X轴坐标背景色
*/
selectedXLabelBackgroundColor?: string;
/**
* 设置价格线上的文字颜色
*/
priceLabelInLineTextColor?: string;
/**
* 设置价格线上的文字大小
*/
priceLabelInLineTextSize?: Float;
/**
* 设置选中X坐标文字颜色
*/
selectedLabelTextColor?: string;
/**
* 设置选中X坐标文字大小
*/
selectedLabelTextSize?: Float;
/**
* 设置价格线上价格框离右距离
*/
priceLabelInLineBoxMarginRight?: Float;
/**
* 价格线上价格图形宽
*/
priceLabelInLineShapeWidth?: Float;
/**
* 价格线上价格图形高
*/
priceLabelInLineShapeHeight?: Float;
/**
* 设置价格线上价格框高度
*/
priceLabelInLineBoxHeight?: Float;
/**
* 设置价格线上价格框内边距
*/
priceLabelInLineBoxPadding?: Float;
/**
* 设置价格线价格框可点击
*/
priceLabelInLineClickable?: boolean;
/**
* 设置右侧价格框背景色
*/
priceLabelInLineBoxBackgroundColor?: string;
/**
* 设置价格线右侧框背景
*/
priceLabelRightBackgroundColor?: string;
/**
* 设置价格线右侧框边框颜色
*/
priceLabelInLineBoxBorderColor?: string;
/**
* 设置价格线框边框宽度
*/
priceLabelInLineBoxBorderWidth?: Float;
/**
* 设置价格线上价格框圆角半径
*/
priceLabelInLineBoxRadius?: Float;
/**
* 设置价格线右侧价格文字的颜色
*/
priceLabelRightTextColor?: string;
/**
* 设置价格线右侧的颜色
*/
priceLineRightColor?: string;
/**
* 设置价格线的宽度
*/
priceLineWidth?: Float;
/**
* 设置显示价格线
*/
showPriceLine?: boolean;
/**
* 设置显示价格线上的价格
*/
showPriceLabelInLine?: boolean;
/**
* 设置价格线颜色
*/
priceLineColor?: string;
/**
* 价格线虚线实心宽度
*/
priceLineDotSolidWidth?: Float;
/**
* 价格线实心间隔
*/
priceLineDotStrokeWidth?: Float;
/**
* 显示右侧虚线和价格
*/
showRightDotPriceLine?: boolean;
/**
* 设置选择器横线宽
*/
selectedXLineWidth?: Float;
/**
* 设置十字线竖线宽度
*/
selectedYLineWidth?: Float;
/**
* 设置十字线横线颜色
*/
selectedXLineColor?: string;
/**
* 设置十字线竖线画笔颜色
*/
selectedYLineColor?: string;
/**
* 选中的线的Y轴颜色
*/
selectedYColor?: string;
/**
* 设置都十字线选中点外圆颜色
*/
selectedCrossBigColor?: string;
/**
* 设置选中时是否显示十字线的交点圆
*/
selectedShowCrossPoint?: boolean;
/**
* 设置选中Y值背景色
*/
selectedPriceBoxBackgroundColor?: string;
/**
* 设置选择器文字大小
*/
selectedInfoTextSize?: Float;
/**
* 选中时价格label的横向padding
*/
selectedPriceBoxHorizontalPadding?: Float;
/**
* 选中时价格label的纵向padding
*/
selectedPriceBoxVerticalPadding?: Float;
/**
* 选中信息框内边距,上下为此值*2
*/
selectedInfoBoxPadding?: Float;
/**
* 选中行弹出框与边缘的距离
*/
selectedInfoBoxMargin?: Float;
/**
* 设置选择器弹出框
*/
selectedInfoBox?: {
textColor: string;
borderColor: string;
backgroundColor: string;
};
/**
* 选中时X坐标边框线宽
*/
selectedLabelBorderWidth?: Float;
/**
* 选中时X坐标边框线颜色
*/
selectedLabelBorderColor?: string;
/**
* 设置选中框的文本
* 时间 开 高 低 收 涨跌额 涨跌幅 成交量 组成的文字数组
*/
selectedInfoLabels?: string[];
/**
* 设置十字线跟随手势移动/显示收盘价
* @enum `CrossFollowTouch`
*/
crossFollowTouch?: Int32;
/**
* 设置y轴上Label与视图右边距
*/
yLabelMarginBorder?: Float;
/**
* 设置背景色顶部颜色
*/
backgroundFillTopColor?: string;
/**
* 设置背景色底部颜色
*/
backgroundFillBottomColor?: string;
/**
* 设置分时线颜色
*/
timeLineColor?: string;
/**
* 设置分时线填充渐变的顶部颜色
*/
timeLineFillTopColor?: string;
/**
* 设置分时线填充渐变的底部颜色
*/
timeLineFillBottomColor?: string;
/**
* 分时线呼吸灯的颜色
*/
timeLineEndPointColor?: string;
/**
* 分时线呼吸灯的颜色半径
*/
timeLineEndRadius?: Float;
/**
* timeLineEndMultiply
*/
timeLineEndMultiply?: Float;
/**
* 选中十字线X轴坐标连框纵向内边距
*/
selectedDateBoxVerticalPadding?: Float;
/**
* 选中十字线X轴坐标连框横向内边距
*/
selectedDateBoxHorizontalPadding?: Float;
/**
* 设置主实图图例距离视图上边缘的距离
*/
mainLegendMarginTop?: Float;
/**
* 设置图例距离视图左边缘的距离
*/
legendMarginLeft?: Float;
/**
* 设置涨的颜色
*/
increaseColor?: string;
/**
* 设置跌的颜色
*/
decreaseColor?: string;
/**
* 设置是否自适应X左右边轴坐标的位置,默认true
*/
betterXLabel?: boolean;
/**
* 设置坐标文字大小
*/
labelTextSize?: Float;
/**
* 设置坐标轴坐标文字颜色
*/
labelTextColor?: string;
/**
* 设置Y轴显示在左侧/右侧 false=右侧，默认右侧
*/
yLabelAlign?: boolean;
/**
* 设置是否自适应X左右边轴坐标的位置,默认true
*/
betterSelectedXLabel?: boolean;
/**
* 统一设置设置文字大小
*/
commonTextSize?: Float;
/**
* 设置上方padding
*/
mainMarginTop?: Float;
/**
* 设置下方padding
*/
paddingBottom?: Float;
/**
* 子视图的顶部padding
*/
childPaddingTop?: Float;
/**
* 设置通用文字颜色
*/
commonTextColor?: string;
/**
* 全局通用线宽
*/
lineWidth?: Float;
/**
* 设置每根K线总宽度(包含外间隙)
*/
itemWidth?: Float;
/**
* 设置每根蜡烛图宽度
*/
candleWidth?: Float;
/**
* 设置蜡烛线画笔宽(空心时的线宽)
*/
candleLineWidth?: Float;
/**
* 设置主视图最大/最小值文字颜色
*/
limitTextColor?: string;
/**
* 设置主图片最大/最小值文字大小
*/
limitTextSize?: Float;
/**
* 蜡烛空心模式
* @enum `CandleHollow`
*/
candleHollow?: Int32;
/**
* 设置背景网格线宽
*/
gridLineWidth?: Float;
/**
* 设置背景网格线颜色
*/
gridLineColor?: string;
/**
* macd空心时线宽
*/
macdStrokeWidth?: Float;
/**
* 设置macd 线空心模式
* @enum `CandleHollow`
*/
macdHolow?: Int32;
/**
* macd柱状图宽
*/
macdWidth?: Float;
/**
* 设置DIF颜色
*/
difColor?: string;
/**
* 设置DEA颜色
*/
deaColor?: string;
/**
* 设置MACD颜色
*/
macdColor?: string;
/**
* 设置K颜色
*/
kColor?: string;
/**
* 设置D颜色
*/
dColor?: string;
/**
* 设置J颜色
*/
jColor?: string;
/**
* 设置RSI1颜色
*/
rsi1Color?: string;
/**
* 设置RSI2颜色
*/
rsi2Color?: string;
/**
* 设置RSI3颜色
*/
rsi3Color?: string;
/**
* 设置MA1颜色
*/
ma1Color?: string;
/**
* 设置MA2颜色
*/
ma2Color?: string;
/**
* 设置MA3颜色
*/
ma3Color?: string;
/**
* 设置交易量MA1颜色
*/
volMa1Color?: string;
/**
* 设置交易量MA2颜色
*/
volMa2Color?: string;
/**
* 交易量图例颜色
*/
volLegendColor?: string;
/**
* 设置当成交量视图显示为线时的颜色
*/
volLineChartColor?: string;
/**
* 交易量图例距离量视图上边缘的距离
*/
volLegendMarginTop?: Float;
/**
* 设置Y轴显示模式独立显示/与网格同时显示
* @enum `YLabelState`
*/
yLabelState?: Int32;
/**
* 最大最小值计算模式,影响Y轴的最大最小值
* @enum `MaxMinCalcModel`
*/
maxMinCalcModel?: Int32;
/**
* 滑动边界监听 - 滑动到最左边
* @todo ⚠️注意会多次触发
*/
onSlidLeft?: BubblingEventHandler<null> | null;
/**
* 滑动边界监听 - 滑动到最右边
* @todo ⚠️注意会多次触发
*/
onSlidRight?: BubblingEventHandler<null> | null;See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library