1.0.1 • Published 10 months ago
@tahausmank/react-native-kline v1.0.1
@TahaUsmanK/react-native-kline
仓库 Android 源码来源于icechao/KlineChart. iOS 源码来源于h-js/KLine
Install
npm i --save @tahausmank/react-native-klineExamples
To run examples:
npm i
npm start
#Android
npm run android
#iOS
cd ios/
pod install
npm run iosProps
| 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 |
Important
Origin Repo: 472647301/react-native-kline