react-native-kline

仓库Android源码来源于icechao/KlineChart. iOS源码来源于h-js/KLine

Install

npm i --save react-native-kline

iOS Settings⬇️

Examples

To run examples:

npm i
npm start

#Android
npm run android

#iOS
cd ios/
pod install
npm run ios

Props

| Prop | Type | Description | Platform | | ------ | ------ | ------ | ------ |
| datas | Array<KLineBar> | K线历史数据 | Android iOS | | locales | Array<string> | 多语言配置 | Android iOS | | indicators | Array<KLineIndicator> | 指标配置 | Android iOS | | onMoreKLineData | (params: KLineCallbackParams) => void | 图表请求加载更多历史数据 | Android iOS | | pricePrecision | number | 价格精度 | Android iOS | | volumePrecision | number | 数量精度 | Android iOS | | mainBackgroundColor | string | 主图背景色 | Android iOS | | selectedXLabelBackgroundColor | string | 设置选中X轴坐标背景色 | Android | | priceLabelInLineTextColor | string | 设置价格线上的文字颜色 | Android | | priceLabelInLineTextSize | number | 设置价格线上的文字大小 | Android | | selectedLabelTextColor | string | 设置选中X坐标文字颜色 | Android | | selectedLabelTextSize | number | 设置选中X坐标文字大小 | Android | | priceLabelInLineBoxMarginRight | number | 设置价格线上价格框离右距离 | Android | | priceLabelInLineShapeWidth | number | 价格线上价格图形宽 | Android | | priceLabelInLineShapeHeight | number | 价格线上价格图形高 | Android | | priceLabelInLineBoxHeight | number | 设置价格线上价格框高度 | Android | | priceLabelInLineBoxPadding | number | 设置价格线上价格框内边距 | Android | | priceLabelInLineBoxShapeTextMargin | number | 价格线上价格文字与图形的间隔 | Android | | priceLabelInLineClickable | boolean | 设置价格线价格框可点击 | Android | | priceLabelInLineBoxBackgroundColor | string | 设置右侧价格框背景色 | Android | | priceLabelRightBackgroundColor | string | 设置价格线右侧框背景 | Android | | priceLabelInLineBoxBorderColor | string | 设置价格线右侧框边框颜色 | Android | | priceLabelInLineBoxBorderWidth | number | 设置价格线框边框宽度 | Android | | priceLabelInLineBoxRadius | number | 设置价格线上价格框圆角半径 | Android | | priceLineRightLabelBackGroundAlpha | number | 设置价格线右侧标签的背景透明度 | Android | | priceLabelRightTextColor | string | 设置价格线右侧价格文字的颜色 | Android | | priceLineRightColor | string | 设置价格线右侧的颜色 | Android | | priceLineWidth | number | 设置价格线的宽度 | Android | | priceLineColor | string | 设置价格线颜色 | Android | | priceLineDotSolidWidth | number | 价格线虚线实心宽度 | Android | | priceLineDotStrokeWidth | number | 价格线实心间隔 | Android | | selectedXLineWidth | number | 设置选择器横线宽 | Android | | selectedYLineWidth | number | 设置十字线竖线宽度 | Android | | selectedXLineColor | string | 设置十字线横线颜色 | Android | | selectedYLineColor | string | 设置十字线竖线画笔颜色 | Android | | selectedYColor | string | 选中的线的Y轴颜色 | Android | | selectedCrossBigColor | string | 设置都十字线选中点外圆颜色 | Android | | selectedCrossPointRadius | number | 设置十字线相交小圆半径 | Android | | selectedCrossPointColor | string | 设置十字线交点小圆颜色 | Android | | selectedShowCrossPoint | boolean | 设置选中时是否显示十字线的交点圆 | Android | | selectedPriceBoxBackgroundColor | string | 设置选中Y值背景色 | Android | | selectedInfoTextSize | number | 设置选择器文字大小 | Android | | selectedPriceBoxHorizontalPadding | number | 选中时价格label的横向padding | Android | | selectedPriceBoxVerticalPadding | number | 选中时价格label的纵向padding | Android | | selectedInfoBoxPadding | number | 选中信息框内边距,上下为此值*2 | Android | | selectedInfoBoxMargin | number | 选中行弹出框与边缘的距离 | Android | | selectedInfoBoxTextColor | string | 设置选择器弹出框文字颜色 | Android | | selectedInfoBoxBorderColor | string | 设置选择器弹出框边框颜色 | Android | | selectedInfoBoxBackgroundColor | string |设置选择器背景颜色 | Android | | selectedLabelBorderWidth | number | 选中时X坐标边框线宽| Android | | selectedLabelBorderColor | string | 选中时X坐标边框线颜色 | Android | | backgroundFillTopColor | string | 设置背景色顶部颜色 | Android | | backgroundFillBottomColor | string | 设置背景色底部颜色 | Android | | timeLineColor | string | 设置分时线颜色 | Android | | timeLineFillTopColor | string | 设置分时线填充渐变的顶部颜色 | Android | | timeLineFillBottomColor | string | 设置分时线填充渐变的底部颜色 | Android | | timeLineEndPointColor | string | 分时线呼吸灯的颜色 | Android | | timeLineEndRadius | number | 分时线呼吸灯的颜色半径 | Android | | selectedDateBoxVerticalPadding | number | 选中十字线X轴坐标连框纵向内边距 | Android | | selectedDateBoxHorizontalPadding | number | 选中十字线X轴坐标连框横向内边距 | Android | | mainLegendMarginTop | number | 设置主实图图例距离视图上边缘的距离 | Android | | legendMarginLeft | number | 设置图例距离视图左边缘的距离 | Android | | increaseColor | string | 设置涨的颜色 | Android | | decreaseColor | string | 设置跌的颜色 | Android | | betterXLabel | boolean | 设置是否自适应X左右边轴坐标的位置,默认true | Android | | labelTextSize | number | 设置坐标文字大小 | Android | | labelTextColor | string | 设置坐标轴坐标文字颜色 | Android | | yLabelAlign | boolean | 设置Y轴显示在左侧/右侧 | Android | | betterSelectedXLabel | boolean | b设置是否自适应X左右边轴坐标的位置,默认true| Android | | commonTextSize | number | 统一设置设置文字大小 | Android | | mainMarginTop | number | 设置上方padding | Android | | paddingBottom | number | 设置下方padding | Android | | childPaddingTop | number | 子视图的顶部padding | Android | | commonTextColor | string | 设置通用文字颜色 | Android | | lineWidth | number | 全局通用线宽 | Android | | candleWidth | number | 设置每根蜡烛图宽度 | Android | | candleLineWidth | number | 设置蜡烛线画笔宽(空心时的线宽) | Android | | limitTextColor | string | 设置主视图最大/最小值文字颜色 | Android | | candleHollow | CandleHollow | 蜡烛是否空心 | Android | | gridLineWidth | number | 设置背景网格线宽 | Android | | gridLineColor | string | 设置背景网格线颜色 | Android | | gridLineRows | number | 设置背景网格行数 | Android | | gridLineColumns | number | 设置背景网格列数 | Android | | macdStrokeWidth | string | macd空心时线宽 | Android | | macdIncreaseColor | string | 设置macd 上涨颜色 | Android | | macdDecreaseColor | string | 设置macd 下跌颜色 | Android | | macdWidth | number | macd柱状图宽 | Android | | difColor | string | 设置DIF颜色 | Android | | deaColor | string | 设置DEA颜色 | Android | | macdColor | string | 设置MACD颜色 | Android | | wr1Color | string | 设置WR1颜色 | Android | | wr2Color | string | 设置WR2颜色 | Android | | wr3Color | string | 设置WR3颜色 | Android | | kColor | string | 设置K颜色 | Android | | dColor | string | 设置D颜色 | Android | | jColor | string | 设置J颜色 | Android | | rsi1Color | string | 设置RSI1颜色 | Android | | rsi2Color | string | 设置RSI2颜色 | Android | | ris3Color | string | 设置RSI3颜色 | Android | | ma1Color | string | 设置MA1颜色 | Android | | ma2Color | string | 设置MA2颜色 | Android | | ma3Color | string | 设置MA3颜色 | Android | | volMa1Color | string | 设置交易量MA1颜色 | Android | | volMa2Color | string | 设置交易量MA2颜色 | Android | | volLegendColor | string | 交易量图例颜色 | Android | | volLineChartColor | string | 设置当成交量视图显示为线时的颜色 | Android | | volLegendMarginTop | number | 交易量图例距离量视图上边缘的距离 | Android |

iOS Settings