IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    Victory - React Native图表库使用手册

    haofly发表于 2022-12-19 06:05:39
    love 0
    • 目前我用到的react-native平台对native支持最好的表格组件了

    安装配置

    1
    2
    3
    4
    5
    6
    7
    8
    npm install --save victory
    npm install --save victory-nativereact-native-svg # react-native，注意还需要执行pod install


    # react-native需要忽略下面的warning
    LogBox.ignoreLogs([
      "Require cycle: node_modules/victory",
    ]);

    Charts

    VictoryArea

    • 每个横坐标都对应两个纵坐标形成一个area，也可以不提供y0，默认就从y最小值开始
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <VictoryArea
    domain={{x: [minX, maxX], y: [minY, maxY]}}// 可手动设置x和y轴的边界值
      domain={{y: [minY, maxY]}}// 也可以单独设置某个轴，和上面的一样，最小值和最大值必须不一样，否则会报一个prop type warning，就只能自己先设置默认值了
      data={[
        { x: 1, y: 2, y0: 0 },
        { x: 2, y: 3, y0: 1 },
        { x: 3, y: 5, y0: 1 },
        { x: 4, y: 4, y0: 2 },
        { x: 5, y: 6, y0: 2 }
      ]}
      dataComponent={<Area />}// 指那一块区域而不是某个点
      interpolation={'basis'}// 默认是linear折线，basis平滑曲线，其他的其实都有差别，但说不上名字了，可以挨个试试：natural/basis/bundle/cardinal/catmullRom/monotoneY/monotoneX/step(电子信号那种)/stepAfter/stepBefore
    />

    Area颜色渐变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    import {Defs, LinearGradient, Stop} from 'react-native-svg';

    <Defs>
      <LinearGradient
        id="charGradient"
        x1="0.5"
        y1="0"
        x2="0.5"
        y2="1">
        <Stop offset="0" stopColor={appTheme?.colors?.primary} />
        <Stop offset="1" stopColor="#f5fcff" />
      </LinearGradient>
    </Defs>

    <VictoryArea
    style={{
        data: {
          fill: 'url(#charGradient)',
          fillOpacity: 0.3,
          stroke: '#2C74F6',// 坐标点线段的颜色
          strokeWidth: 2,// 坐标点线段的粗细
        },
        parent: {paddingTop: 0},
      }}
    />

    解决VictoryArea最后一个点的label被截断无法显示完整的问题

    • 参考VictoryArea overflow labels be covered 
    1
    2
    3
    <VictoryArea
      groupComponent={<G />}// 只需加一个这个就行
    />

    VictoryAxis

    • 坐标轴(有些图表自带了的，如果像自定义可以直接用这个)
    • 如果要自定义一条看起来像横坐标或者纵坐标的线，可以直接用VictoryLine，data就是一个开始点一个结束点即可
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <VictoryAxis
    tickLabelComponent={<></>}// 这样可以只显示坐标不显示坐标上的值
    offsetY={160}// 纵向坐标偏移量，单位居然是px
      style={{
        axis: {stroke: "transparent"},// 坐标轴线的颜色样式
        tickLabels: {fill: 'white'}// 坐标轴轴上的文字的说明的样式
      }}
    />
    <VictoryAxis
    dependentAxis// 这样就是纵轴
      offsetX={400}// 横向坐标偏移量
    />

    VictoryBoxPlot股票K线图

    VictoryGroup

    • 使用它包裹几个内部的charts可以实现隐藏横纵坐标
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <VictoryGruop
    style={{data: {}}}
      offset={20}// 子charts之间的距离
      padding={{top: 0, bottom: 0, left: 0, right: 0}}// padding不能在style里面设置，只能在这里设置
    style={{
    axis: {stroke: 'red'},// 设置线的颜色，我在VictoryChart可以设置，但是在VictoryGroup下面设置不成功
    }}
    >
    </VictoryGroup>

    VictoryLine折线图/线段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <VictoryLine
    style={{data: {
        stroke: '#2C74F6',
        strokeDasharray: '4,4', // 用虚线表示
      }}}// 设置线的颜色
    labels={['']}
    standalone={false}
    data={data1}
    interpolation={'basis'}// 默认是linear折线，basis平滑曲线，其他的其实都有差别，但说不上名字了，可以挨个试试：natural/basis/bundle/cardinal/catmullRom/monotoneY/monotoneX/step(电子信号那种)/stepAfter/stepBefore
      dataComponent={<Curve />}// 指那一条线，而不是某个点
    />

    VictoryPie饼图

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    const CustomSlice = (props: any) => {
      const {index, data} = props;
      console.log('data', data, index);
      const colors: any = {
        Cats: 'blue',
        Dogs: 'red',
        Birds: 'yellow'
      }
      console.log('color', colors[data[index].x])
      const style = Object.assign({}, props.style, {
        stroke: colors[data[index].x]
      });
      return (
        <Slice {...props} style={style}/>
      );
    }
      
    <VictoryPie
    labelComponent={<></>}// 不显示label
      style={{ data: { fillOpacity: 0, stroke: "transparent", strokeWidth: 2 }, }}
     dataComponent={<CustomSlice />}// 如果要自定义每一个data的样式可以这样做
    data={[
          { x: "Cats", y: 35 },
          { x: "Dogs", y: 40 },
          { x: "Birds", y: 55 }
          ]}
    />

    VictoryScatter散点图

    • 如果想要展示或者高亮一个单独的点，可以直接用这个来就行了，它还支持丰富的点样式
    1
    2
    3
    4
    5
    6
    7
    <VictoryScatter
        style={{ data: { fill: "#c43a31" } }}
        size={7}// 指定点的大小
        labels={({ datum }) => datum.y}
        labelComponent={<VictoryLabel dy={8}/>}
        data={[{x: 1, y: 1, symbol: 'star', size: 5}]}// 可以针对某个点单独设置其形状和大小，形状包括star星星，square正方形，diamond菱形，circle圆形，triangleUp三角形
    />

    Containers

    VictoryChart

    1
    2
    3
    <VictoryChart
      height={300}// 高度的默认值就是300
    />

    事件

    • 居然不能在外部直接包裹Touchable*等组件来实现全局的事件，包裹了，点击也没用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <VictoryChart
      events={[
        {
          childName: 'all',// 可选all或者子组件的name
          target: 'parent', // 可选parent、data、labels
          eventHandlers: {
            onPress: () => {// 支持的事件都行，注意移动端和web端的不同就行
              console.log('onPress');
            },
          },
        },
      ]}
    />

    隐藏坐标轴

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <VictoryChart>
      <VictoryAxis
        tickLabelComponent={<></>}// 如果不加这个，那轴上的坐标也是会显示的
        style={{
               axis: {
               display: 'none',
              },
        }}
      />
      <VictoryAxis
        tickLabelComponent={<></>}
        dependentAxis
        style={{
               axis: {
               display: 'none',
              },
        }}
      />  
    </VictoryChart>

    VictoryCursorContainer

    • 当鼠标或者触摸的时候能够展示一个十字的光标
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    containerComponent={
      <VictoryCursorContainer
      cursorDimension={'x'}// 仅展示横轴或者竖轴
      cursorLabel={(point) => point.x}// 展示label，不填表示不显示
        cursorLabelComponent={<VictoryLabel
                              x={300}// 可以指定label显示在哪个横坐标的位置，可以实现固定在右边
                              />}// 自定义cusrorLabel组件
      cursorComponent={
      <LineSegment// 可以自定义光标的样式
      style={{
      stroke: '#BDBDBD',
      strokeWidth: '2px',
      strokeDasharray: '2,4',
    }}
    />
    }
    events={{
          onTouchMove: (evt: any, targetProps: any): any => {},
        onTouchEnd: (evt: any, targetProps: any): any => {},
          onTouchStart: (evt: any, targetProps: any): any => {},
    }}
    />
    }

    公共属性

    dataComponent

    • 是指坐标点的组件

    其他组件

    VictoryLabel

    TroubleShooting

    • [233, “RNSVGText”,71…] is not usable as a native method argument: 通常是由于表格中有变量没有赋初始值，得到了一个NaN造成的


沪ICP备19023445号-2号
友情链接