RN图表组件react-native-charts-wrapper
文章目录
-
-
- 组件安装
- 组件使用
- 组件属性
-
- 一. 散点图组件(ScatterChart)
- 二. 饼图组件(PieChart)
- 三. 折线图组件(LineChart)
- 五. 柱状图(BarChart)
-
- 支持图表类型
- 效果图（布局代码可点击此处下载）
组件安装
//安装
yarn add react-native-charts-wrapper
组件使用
//引入组件
import {
LineChart,
ScatterChart,
...
} from 'react-native-charts-wrapper';
//使用
<ScatterChart
style={styles.chart}
data={this.state.data}
legend={this.state.legend}
marker={this.state.marker}
onSelect={this.handleSelect.bind(this)}
onChange={(event) => console.log(event.nativeEvent)}
/>
组件属性
一. 散点图组件(ScatterChart)
ScatterChart散点图组件属性大致分为【1-属性类型】和【2-data属性】两个属性
ScatterChart.propTypes = {
// 样式属性,详细见下面【1-1】
...BarLineChartBase.propTypes,
//data属性，详细见下面【1-2】
data: scatterData
};
-
[1-1]样式属性
继承属性…BarLineChartBase.propTypes
//BarLineChartBase.iface propTypes: { //继承属性，详细见下面【1-1-1】 ...ChartBase.propTypes, maxHighlightDistance: PropTypes.number, //最大高亮间距（影响相邻数据点mark显示） drawGridBackground: PropTypes.bool, //是否绘制网格背景色 gridBackgroundColor: PropTypes.number, //绘制网格背景色的颜色 drawBorders: PropTypes.bool, //是否绘制网格外边框 borderColor: PropTypes.number, //绘制的网格外边框的颜色（当drawBorders=true时有效） borderWidth: PropTypes.number, //绘制的网格外边框的宽度 minOffset: PropTypes.number, //最小偏移量--无效 maxVisibleValueCount: PropTypes.number, //最大可见数量--无效 /** *可见范围（如果数据点超过该范围需要上下左右移动查看） *格式： * visibleRange={{ * x:{min:1,max:500}, * y:{left:{min:1,max:5000},right:{min:1,max:5000}} * } * } */ visibleRange: PropTypes.shape({ x: PropTypes.shape({ //X轴可见范围（min-最小；max-最大） min: PropTypes.number, max: PropTypes.number }), y: PropTypes.shape({ //y轴可见范围（min-最小，max-最大） left: PropTypes.shape({ min: PropTypes.number, max: PropTypes.number }), right: PropTypes.shape({ min: PropTypes.number, max: PropTypes.number }) }) }), autoScaleMinMaxEnabled: PropTypes.bool, //是否启动自动缩放最小最大值-无效 keepPositionOnRotation: PropTypes.bool, //旋转保持位置-未测试 //是否启用高光拖拽切换数据点（可见范围内未放大情况，可拖拽切换选择数据点） highlightPerDragEnabled: PropTypes.bool, //是否启用缩放图表（如果为true，后面的两个x y轴缩放失效，如果为false，双击缩放功能也无效） scaleEnabled: PropTypes.bool, scaleXEnabled: PropTypes.bool, //启用X轴缩放图表 scaleYEnabled: PropTypes.bool, //启用Y轴缩放图表 dragEnabled: PropTypes.bool, //是否启动图表放大后可左右拖拽 pinchZoom: PropTypes.bool, //启用x轴y轴同步缩放（无法针对某一轴单独缩放） doubleTapToZoomEnabled: PropTypes.bool, //启动图表双击缩放功能 /** *Y轴属性 */ yAxis: PropTypes.shape({ //左侧y轴 left: PropTypes.shape(yAxisIface), //右侧y轴 right: PropTypes.shape(yAxisIface) //yAxisIface属性 export const yAxisIface = { //继承属性,详细见下面【1-1-2】 ...axisIface, inverted: PropTypes.bool, //是否倒叙 spaceTop: PropTypes.number, //顶部空间 spaceBottom: PropTypes.number, //底部空间 //位置：表外部/表内部 position: PropTypes.oneOf(['OUTSIDE_CHART', 'INSIDE_CHART']), maxWidth: PropTypes.number, //最大宽度 minWidth: PropTypes.number, //最小宽度 // zero line零线 zeroLine: PropTypes.shape({ enabled: PropTypes.bool, //是否可用 lineWidth: PropTypes.number, //线宽度 lineColor: PropTypes.number //线颜色 }) }; }), /** *缩放属性(图表通过指定放大的倍数对指定的位置进行缩放显示) *scaleX：x轴缩放倍数 *scaleY：y轴缩放倍数 *xValue：x轴缩放中心值 *yValue：y轴缩放中心值 */ zoom: PropTypes.shape({ scaleX: PropTypes.number.isRequired, scaleY: PropTypes.number.isRequired, xValue: PropTypes.number.isRequired, yValue: PropTypes.number.isRequired, axisDependency: PropTypes.oneOf(['LEFT', 'RIGHT'])//轴依赖：左侧/右侧 }), /** *视图表四周偏移距离 */ viewPortOffsets: PropTypes.shape({ left: PropTypes.number, top: PropTypes.number, right: PropTypes.number, bottom: PropTypes.number }), /** *额外偏移 */ extraOffsets: PropTypes.shape({ left: PropTypes.number, top: PropTypes.number, right: PropTypes.number, bottom: PropTypes.number }), group: PropTypes.string, identifier: PropTypes.string,//标识 syncX: PropTypes.bool, //X轴同步 syncY: PropTypes.bool, //Y轴同步 }-
【1-1-1】继承属性：…ChartBase.propTypes
//ChartBase.chartIface propTypes: { //继承属性（可忽略内部详细属性） ...ViewPropTypes, animation: PropTypes.shape({ //动画属性 durationX: PropTypes.number, // Millis：x轴动画时间 durationY: PropTypes.number, // Millis：y轴动画时间 // option of easingX, easingY: // Linear, // EaseInQuad, // EaseOutQuad, // EaseInOutQuad, // EaseInCubic, // EaseOutCubic, // EaseInOutCubic, // EaseInQuart, // EaseOutQuart, // EaseInOutQuart, // EaseInSine, // EaseOutSine, // EaseInOutSine, // EaseInExpo, // EaseOutExpo, // EaseInOutExpo, // EaseInCirc, // EaseOutCirc, // EaseInOutCirc, // EaseInElastic, // EaseOutElastic, // EaseInOutElastic, // EaseInBack, // EaseOutBack, // EaseInOutBack, // EaseInBounce, // EaseOutBounce, // EaseInOutBounce, easingX: PropTypes.string, //X轴动画样式（渐变/匀速） easingY: PropTypes.string //y轴动画样式（渐变/匀速） }), chartBackgroundColor: PropTypes.number, //图表区域背景色（包含之坐标轴和图列区域） logEnabled: PropTypes.bool, //是否启用char日志输出，性能损耗(默认禁用) noDataText: PropTypes.string, //没有数据显示的提示 touchEnabled: PropTypes.bool, //是否开启触摸可用 dragDecelerationEnabled: PropTypes.bool,//是否启动滑动阻力效果（true-滑动有平滑感） //阻力摩擦系数 dragDecelerationFrictionCoef: (props, propName, componentName) => { .... }, //是否启用点击数据点高亮显示(true-选中的点交叉轴属性配置才有效果) highlightPerTapEnabled: PropTypes.bool, /** *图表描述属性 */ chartDescription: PropTypes.shape(descriptionIface), //descriptionIface const descriptionIface = { text: PropTypes.string, //描述文字 textColor: PropTypes.number, //文字颜色 textSize: PropTypes.number, //文字大小 positionX: PropTypes.number, //x轴位置 positionY: PropTypes.number, //y轴位置 }; /** *图列属性 */ legend: PropTypes.shape(legendIface), //legendIface const legendIface = { enabled: PropTypes.bool, //是否可用 textColor: PropTypes.number, //文字颜色 textSize: PropTypes.number, //文字大小 fontFamily: PropTypes.string, //字体 fontStyle: PropTypes.number, //字体样式 fontWeight: PropTypes.number, //字体权重 wordWrapEnabled: PropTypes.bool, //是否自动换行（多个图列时候） //图列与图表间距百分比（0-1，当drawInside=false有效） maxSizePercent: PropTypes.number, //水平对其方式（居左、居中、居右） horizontalAlignment: PropTypes.oneOf(['LEFT', 'CENTER', 'RIGHT']), //竖直居中方式（居顶、居中、居底） verticalAlignment: PropTypes.oneOf(['TOP', 'CENTER', 'BOTTOM']), //图列和图表分布方向（水平/垂直） orientation: PropTypes.oneOf(['HORIZONTAL', 'VERTICAL']), //图列是否覆盖图表绘制 drawInside: PropTypes.bool, //图列的文字和图形分布方向（左到右、右到左） direction: PropTypes.oneOf(['LEFT_TO_RIGHT', 'RIGHT_TO_LEFT']), //图列形状 form: PropTypes.oneOf(['NONE', 'EMPTY', 'DEFAULT', 'SQUARE', 'CIRCLE', 'LINE']), formSize: PropTypes.number, //图列大小 xEntrySpace: PropTypes.number, //图列间水平间距（多个图列有效） yEntrySpace: PropTypes.number, //图列间竖直间距（多个图列有效） formToTextSpace: PropTypes.number, //图列图形与文字间距 //自定义图列颜色和标签 custom: PropTypes.shape({ colors: PropTypes.arrayOf(PropTypes.number), labels: PropTypes.arrayOf(PropTypes.string) }) }; /** *X轴属性 */ xAxis: PropTypes.shape(xAxisIface), //xAxisIface export const xAxisIface = { //继承属性，详细见下面【1-1-2】 ...axisIface, //标签旋转角度 labelRotationAngle: PropTypes.number, //是否避免首次和最后一次剪裁 avoidFirstLastClipping: PropTypes.bool, //x轴位置 position: PropTypes.oneOf(['TOP', 'BOTTOM', 'BOTH_SIDED', 'TOP_INSIDE', 'BOTTOM_INSIDE']), //轴与标签间距 yOffset: PropTypes.number }; /** *弹出标记属性 */ marker: PropTypes.shape({ enabled: PropTypes.bool, //是否可用 digits: PropTypes.number, //数字 markerColor: PropTypes.number,//标记颜色 textColor: PropTypes.number, //字体颜色 textSize: PropTypes.number, //字体大小 }), /** *stackIndex for StackBarChart *高亮显示区域（饼状图默认凸显实体配合highlightPerTapEnabled=true & selectionShift *值才有效） *pieHighlights: [{x: 1}] //x值是饼状图实体下标 */ highlights: PropTypes.arrayOf( PropTypes.shape({ x: PropTypes.number.isRequired, // this is used in stacked bar chart dataSetIndex: PropTypes.number, // this is necessary in combined chart when default highlight is set. // the default sequence is line, bar, scatter, candle, bubble dataIndex: PropTypes.number, y: PropTypes.number, stackIndex: PropTypes.number })) } -
【1-1-2】轴基类属性-axisIface
//AxisIface.axisIface export const axisIface = { // what is drawn enabled: PropTypes.bool, //是否可用 drawLabels: PropTypes.bool, //是否绘制轴标签（刻度） drawAxisLine: PropTypes.bool, //是否绘制轴线（X轴或Y轴的一条线） drawGridLines: PropTypes.bool, //是否会自网格线 // style textColor: PropTypes.number, //文字颜色 textSize: PropTypes.number, //文字大小 fontFamily: PropTypes.string, //文字字体 fontStyle: PropTypes.string, //文字样式 fontWeight: PropTypes.string, //文字权重 gridColor: PropTypes.number, //网格线颜色 gridLineWidth: PropTypes.number,//网格线宽度 axisLineColor: PropTypes.number,//轴线颜色 axisLineWidth: PropTypes.number,//轴线宽的 gridDashedLine: PropTypes.shape({ //网格虚线 lineLength: PropTypes.number, //线长 spaceLength: PropTypes.number, //间距 phase: PropTypes.number //阶段 }), /** *limit lines限制线:y轴设置效果为与x轴平行的一条线，类似用于表示平均水平的一条。 * */ limitLines: PropTypes.arrayOf( PropTypes.shape({ limit: PropTypes.number.isRequired, //线的坐标， label: PropTypes.string, //标签文字 lineColor: PropTypes.number, //线颜色 lineWidth: PropTypes.number, //线宽度 valueTextColor: PropTypes.number, //文本内容颜色 valueFont: PropTypes.number, //字体值 //标签位置 labelPosition: PropTypes.oneOf(['LEFT_TOP', 'LEFT_BOTTOM', 'RIGHT_TOP', 'RIGHT_BOTTOM']), lineDashPhase: PropTypes.number, //虚线偏移 lineDashLengths: PropTypes.arrayOf(PropTypes.number) //虚线长度和间隔 })), //如果将其设置为true，则限制线将绘制在实际数据后面，否则将绘制在顶部。默认值:假 drawLimitLinesBehindData: PropTypes.bool, /** *labelCountForce ：是否强制使用指定的标签数 *true-将强制设置标签计数，这意味着确切指定的标签计数将被强制执行； *fase-绘制并沿着轴均匀分布——这可能导致标签具有不均匀的值； */ labelCountForce: PropTypes.bool, labelCount: PropTypes.number, //轴的标签数刻度个数 /** *轴最大值和最小值决定了轴的开始和结束刻度坐标（与visibleRange可视范围不同的是，可视范围决定默认 *图表内可观察到的数据： *1）如果可视范围大于轴最大值，则图表只能显示轴最大值范围内的数据，超过轴最大值的数据需要拖动图表 才可见); *2）如果轴最大值超过可视范围，则只能在可是范围内选择数据，超过可视范围无法操作； */ axisMinimum: PropTypes.number, //轴最小值 axisMaximum: PropTypes.number, //轴最大值 /** *granularityEnabled：启用/禁用轴值间隔的粒度控制。如果启用，则不允许轴间隔低于某个粒度。 *默认值:false。 * *granularity：轴间隔粒度，在缩放时为轴设置一个最小间隔。轴间距不能低于这个极限。这可以用来避免 *标签缩放时重复显示。 *注意！注意！注意！：仅当强制指定确切标签数为fase（labelCountForce=false）时候生效。 *如果坐标轴是date时间为单位，需要根据timeUnit指定单位来设置granularity间隔值： *1）timeUnit单位是毫秒 轴想精确到1秒后不允许继续放大，则granularity可设置间隔为1000(毫秒)； 轴想精确到1分钟后不允许继续放大，则granularity可设置为60*1000） *2）timeUnit单位是秒 轴想精确到1秒后不允许继续放大，则granularity可设置间隔为1； 轴想精确到1分钟后不允许继续放大，则granularity可设置为60） */ granularityEnabled: PropTypes.bool, granularity: PropTypes.number, /** *将轴标签居中，而不是将它们画在原来的位置。这对于分组的条形图尤其有用 (居于条形图的底部剧中显示，而不是靠近分割线之间显示刻度标签) */ centerAxisLabels: PropTypes.bool, // formatting 数据格式 valueFormatter: PropTypes.oneOfType([ PropTypes.oneOf(['largeValue', 'percent', 'date']), //大数、百分比、日期 PropTypes.string, PropTypes.arrayOf(PropTypes.string) ]), /** *valueFormatterPattern, since, timeUnit are used when valueFormatter is 'date' *since: milliseconds of 2018-6-1, timeUnit: DAYS, x:9, *valueFormatterPattern: yyyy-MM-dd will display 2018-6-10 *Note: for iOS/Charts, double is used for x, but in MpAndroidChart, *float is used for x. * *so in android, there will be precision loss when you use MILLISECONDS/SECOND/ *MINUTES as x value. * *you can use a different since like seconds of 2019 or use timeUnit DAYS, *then x value will be within a valid range. *当valueFormatter格式是日期时候，需要指定valueFormatterPattern规则以及since，timeUnit * */ valueFormatterPattern: PropTypes.string, since: PropTypes.number, // 当前开始时间：milliseconds from 1970-1-1 when x=0 // timeUnit of x,时间戳 timeUnit: PropTypes.oneOf(['MILLISECONDS', 'SECONDS', 'MINUTES','HOURS', 'DAYS']), };
-
-
【1-2】data属性：
//ChartDataConfig.scatterData dataSets: PropTypes.arrayOf(PropTypes.shape({ values: PropTypes.arrayOf( //数据值 PropTypes.oneOfType([ PropTypes.shape({ x: PropTypes.number, //数据点X坐标值 y: PropTypes.number.isRequired, //数据点Y坐标值-必须参数 marker: PropTypes.string, //弹出的标记属性 }), PropTypes.number ]) ), label: PropTypes.string.isRequired, //图列的标签属性 config: PropTypes.shape({。 //组件data属性内的config属性 /** *继承属性，详细见下面【1-2-1】 */ ...ChartDataSetConfig.common, ...ChartDataSetConfig.barLineScatterCandleBubble, ...ChartDataSetConfig.lineScatterCandleRadar, scatterShapeHoleRadius: PropTypes.number //数据点图形本身半径大小 scatterShapeSize: PropTypes.number, //数据点图型外圈散射半径大小 //数据点图形形状 scatterShape: PropTypes.oneOf(['SQUARE', 'CIRCLE', 'TRIANGLE', 'CROSS', 'X']), scatterShapeHoleColor: PropTypes.number, //数据点图型颜色 }) }))-
【1-2-1】继承属性…ChartDataSetConfig
//继承属性ChartDataSetConfig.chartDataSetConfig common: { color: PropTypes.number, //标注的图形的颜色 colors: PropTypes.arrayOf(PropTypes.number), //标注的图形颜色（多个图形） highlightEnabled:PropTypes.bool, //数据点是否可点击 drawValues: PropTypes.bool, //是否显示数据点上数字（Y值） valueTextSize:PropTypes.number, //数据点上面数字大小 valueTextColor:PropTypes.number, //数据点上面数字颜色 visible:PropTypes.bool, //是否显示数据点图形 //数据点图形上面的数字格式（大数 百分比 日期） valueFormatter: PropTypes.oneOfType([ PropTypes.oneOf(['largeValue', 'percent', 'date']), PropTypes.string, PropTypes.arrayOf(PropTypes.string) ]), valueFormatterPattern: PropTypes.string, //数据格式正则 axisDependency:PropTypes.oneOf(['LEFT', 'RIGHT']) //轴的依赖（左侧/右侧） }, barLineScatterCandleBubble:{ highlightColor: PropTypes.number //选中的数据点交叉轴高亮颜色 }, lineScatterCandleRadar: { drawVerticalHighlightIndicator: PropTypes.bool, //高亮显示选中点竖直方向线 drawHorizontalHighlightIndicator: PropTypes.bool,//高亮显示选中点水平方向线 highlightLineWidth: PropTypes.number //选中点交叉线宽度 },
-
二. 饼图组件(PieChart)
PieChart.propTypes = {
/**
*样式继承属性，详细见下面【2-1】
*/
...PieRadarChartBase.propTypes,
/**
*是否显示饼状图中实体的Label文字标签（非数值Value标签，Value标签通过
*ChartDataSetConfig.chartDataSetConfi.common设置）
*(搭配data——>config——>xValuePosition、ValuePosition:"OUTSIDE_SLICE"可显示在区域外部。
*/
drawEntryLabels: PropTypes.bool,
/**
*实体Label文字标签颜色和大小（非Value数值标签，value标签设置可通过
*ChartDataSetConfig.chartDataSetConfi.common中valueTextSize设置）。
*/
entryLabelColor: PropTypes.number,
entryLabelTextSize: PropTypes.number,
//是否以百分比形式显示实体数值标签（搭配data->config->valueFormatter:'#.#\'%\''可显示百分比）
usePercentValues: PropTypes.bool,
centerText: PropTypes.string, //饼状图中心标签文本
styledCenterText: PropTypes.shape({ //饼状图中文文字风格
text: PropTypes.string, //文字，会被centerText属性覆盖
color: PropTypes.number, //文字颜色
size: PropTypes.number //文字大小
}),
centerTextRadiusPercent: PropTypes.number, //饼图中心标签半径百分比（决定文字排版方向和换行）
//饼图中心孔半径（搭配transparentCircleRadius(要大于该值)可实现交界处阴影效果）
holeRadius: PropTypes.number,
holeColor: PropTypes.number, //饼图中心孔背景颜色
transparentCircleRadius: PropTypes.number, //透明圆半径
transparentCircleColor: PropTypes.number, //透明圆颜色
maxAngle: PropTypes.number, //最大角度（决定最后一个实体距离第一个实体间距空隙，默认360）
/**
*数据属性，详细见下面【2-2】
*PieChart should have only one dataset
*/
data: pieData
};
-
【2-1】样式继承属性…PieRadarChartBase.propTypes
//PieRadarChartBase.iface propTypes: { //继承属性，详细见上面【1-1-1】 ...ChartBase.propTypes, minOffset: PropTypes.number, //暂时无效 rotationEnabled: PropTypes.bool, //是否启用旋转（滑动可旋转） rotationAngle: PropTypes.number //旋转角度（第一个实体默认旋转多少角度来展示） } -
【2-2】data属性：
//ChartDataConfig.pieData const pieData = PropTypes.shape({ dataSets: PropTypes.arrayOf(PropTypes.shape({ values: PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.shape({ //饼状图实体数据值（必选） value: PropTypes.number.isRequired, //饼状图实体的文字标签，会影响实体标签和图列文字标签展示（可选） label: PropTypes.string }), PropTypes.number ]) ), label: PropTypes.string.isRequired, //饼状图整体的标签（必选） //配置属性 config: PropTypes.shape({ //继承属性，详细见上面【1-2-1】 ...ChartDataSetConfig.common, sliceSpace: PropTypes.number, //饼状图实体之间间距 selectionShift: PropTypes.number, //选中片段凸显高度（值越大图表越小凸显越明显） //实体文字标签显示位置(内部/外部) xValuePosition: PropTypes.oneOf(['INSIDE_SLICE', 'OUTSIDE_SLICE']), //实体数值（百分比）标签显示位置 yValuePosition: PropTypes.oneOf(['INSIDE_SLICE', 'OUTSIDE_SLICE']), /** *实体标签指向实体区域的内线和外线长度（仅当xValuePosition或yValuePosition有一个 *为OUTSIDE_SLICE时有效）。 * Part1：内线 * Part2：外线 */ valueLinePart1Length: PropTypes.number, valueLinePart2Length: PropTypes.number, valueLineColor: PropTypes.number, //实体标签指向实体区域线的颜色 valueLineWidth: PropTypes.number, //实体标签指向实体区域线的宽度 /** *实体标签指向实体区域内线(Part1)偏移实体片段百分比默认75.f * 0-内线以实体最内层区域作为起点； * 50-内线以实体中心区域作为起点； * 100-内线以实体最外层区域作为起点） */ valueLinePart1OffsetPercentage: PropTypes.number, valueLineVariableLength: PropTypes.bool //实体标签外线长度可变（自适用） }) })), })
三. 折线图组件(LineChart)
LineChart.propTypes = {
//样式属性——详见上面【1-1】
...BarLineChartBase.propTypes,
//数据属性——详见下面【3-1】
data: lineData,
};
-
【3-1】数据属性 lineData
//ChartDataConfig.lineData const lineData = PropTypes.shape({ dataSets: PropTypes.arrayOf(PropTypes.shape({ //数据集 values: PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.shape({ x: PropTypes.number, y: PropTypes.number.isRequired, marker: PropTypes.string }), PropTypes.number ]) ), label: PropTypes.string.isRequired, //标签-必选参数 //配置参数 config: PropTypes.shape({ /** *继承属性，详细见上面【1-2-1】 */ ...ChartDataSetConfig.common, ...ChartDataSetConfig.barLineScatterCandleBubble, ...ChartDataSetConfig.lineScatterCandleRadar, //继承属性，详见下面【3-1-1】 ...ChartDataSetConfig.lineRadar, /** *折线上数据圆点 */ drawCircles: PropTypes.bool, //是否绘制折线上的数据点(圆) circleRadius: PropTypes.number, //折线上数据点(圆)的半径（drawCircles=true有效） circleColor: PropTypes.number, //折线上数据点(圆)的颜色 drawCircleHole: PropTypes.bool, //是否绘制线上数据圆中心圆孔 circleHoleColor: PropTypes.number, //折线数据点中心圆孔颜色(drawCircleHole=true有效) /** *折线样式 *LINEAR-直线性 *STEPPED-步进（类似台阶） *CUBIC_BEZIER-贝塞尔曲线 *HORIZONTAL_BEZIER-水平贝塞尔曲线 */ mode: PropTypes.oneOf(['LINEAR', 'STEPPED', 'CUBIC_BEZIER', 'HORIZONTAL_BEZIER']), //折线弯曲度（0-1）仅当mode=CUBIC_BEZIER有效，值越大弯曲越厉害，当为0时显示直线 drawCubicIntensity: PropTypes.number, //折线上多个数据点颜色(暂未测试到) circleColors: PropTypes.arrayOf(PropTypes.number), /** *虚线样式 */ dashedLine: PropTypes.shape({ lineLength: PropTypes.number.isRequired, //线长 spaceLength: PropTypes.number.isRequired, //间距 phase: PropTypes.number, }) }) })) })-
【3-1-1】继承属性…ChartDataSetConfig.lineRadar
//ChartDataSetConfig.lineRadar 设置折线下面区域填充颜色 lineRadar: { //渐变颜色 fillGradient: PropTypes.shape({ colors: PropTypes.arrayOf(PropTypes.number), // iOS[1,0]-从上至下 positions: PropTypes.arrayOf(PropTypes.number), angle: PropTypes.number, // Android orientation: PropTypes.oneOf([ // draw the gradient from the top to the bottom 'TOP_BOTTOM', // draw the gradient from the top-right to the bottom-left 'TR_BL', // draw the gradient from the right to the left 'RIGHT_LEFT', // draw the gradient from the bottom-right to the top-left 'BR_TL', // draw the gradient from the bottom to the top 'BOTTOM_TOP', // draw the gradient from the bottom-left to the top-right 'BL_TR', // draw the gradient from the left to the right 'LEFT_RIGHT', // draw the gradient from the top-left to the bottom-right 'TL_BR', ]), }), fillColor: PropTypes.number, //填充颜色 fillAlpha: PropTypes.number, //透明度 drawFilled: PropTypes.bool, //是否绘制填充色 //设置图表的线宽(min = 0.2f, max = 10f);默认1 f注意:线越细==性能越好，线越粗==性能越差 lineWidth: (props, propName, componentName) => { let lineWidth = props[propName]; if (lineWidth && (typeof lineWidth !== 'number' || lineWidth < 0.2 || lineWidth > 10)) { return new Error( `Invalid prop ${propName} supplied to '${componentName}'. Value must be number and between 0.2f and 10f` ); } }
}
-
五. 柱状图(BarChart)
BarChart.propTypes = {
//样式继承属性，详细见上面【1-1】
...BarLineChartBase.propTypes,
//value绘制在柱状图之外（false-在柱状图顶部内侧绘制value值）
drawValueAboveBar: PropTypes.bool,
//是否绘制柱状图Item背景色（灰色）
drawBarShadow: PropTypes.bool,
//true-显示整个操作栏，false-突出显示某个值（仅适用于stacked堆叠柱状图）
highlightFullBarEnabled: PropTypes.bool,
//数据属性
data: barData
}
闲暇之余写了个小程序，欢迎大家扫码使用
