RN图表组件react-native-charts-wrapper

文章目录

      • 组件安装
      • 组件使用
      • 组件属性
        • 一. 散点图组件(ScatterChart)
        • 二. 饼图组件(PieChart)
        • 三. 折线图组件(LineChart)
        • 五. 柱状图(BarChart)

  • 支持图表类型
  • 效果图(布局代码可点击此处下载)
    RN图表组件react-native-charts-wrapper_第1张图片

组件安装

//安装
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
}

闲暇之余写了个小程序,欢迎大家扫码使用
在这里插入图片描述

你可能感兴趣的:(React,Native)