查看github原文
如有错误请在评论区指出~
前言。。和一些关于repo起名的建议
在github上找了很多图表类的插件，大多都是直方图之类的显示完好，到了饼图都差强人意。因为react-native版本更新的快，用不同的版本必须适配不同的第三方库，所以很多repo维护的都比较慢（或者类似于react-native-chart就直接不更新了），如果你非得用某个第三方库，在你当前版本不适合的情况下，要么换库，要么就降级react-native版本。这导致在开发上非常棘手，因为是团队项目，不可能去降级react-native版本的啊，在找适合的第三方库的过程中也是一度陷入了绝望之中。直到在react-native-chart的readme中发现了victory-native。这里，我不得不吐槽一下他的repo名，victory什么鬼啊，没用过你家react-victory的人真心不知道你是干啥的。
说句题外话，如果自己有repo的小伙伴一定要重视你的项目命名，最好把它的功能用命名的方式描述出来，然后详细写下description，这样才能提高star数，（来自一个刚刚参透这些道理并且写了不少repo，star数扔为0的老阿姨的忠告）。如果你经常从github上找三方库你就会发现，star数很高的项目基本上都是文档详尽，description写的很清楚的一些项目。拿react-native-chart举例，虽然也是个不错的repo，但已经不能满足当前的react-native版本了，比起victory-native还是有很多不足的地方，但是他的star数要比victory-native高一倍。起个名字还是关系着命运啊，就像王胜利和王.我会做图表一样，你会找谁做图表呢。。
先看效果图
安装victory-native
首先，先要安装react-native-svg，对应你的react-native版本号进行安装。
react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0
react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0
react-native-svg >= 5.1.8 only supports react-native >= 0.44.0 and react == 16.0.0-alpha.6
react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12
react-native-svg >= 5.3.0 only supports react-native >= 0.46.0 and react == 16.0.0-alpha.12
react-native-svg >= 5.4.1 only supports react-native >= 0.47.0 and react == 16.0.0-alpha.12
react-native-svg >= 5.5.1 only supports react-native >= 0.50.0 and react == 16.0.0
之后link一下
react-native link react-native-svg
重新打包安装
react-native run-ios
// or
react-native run-android
然后安装victory-native
yarn add victory-native
使用
先引入，这里只讨论饼图，不过很多参数都是共同的，其他的见官方文档
import {
VictoryPie,
VictoryLegend,
} from 'victory-native';
使用组件
<VictoryPie
padding={{ top: 0, left: 0 }}
colorScale={colorScale}
data={[
{ x: '净值', y: 35 },
{ x: '已用', y: 40 },
{ x: '可用', y: 55 },
{ x: '总盈亏', y: 55 },
]}
innerRadius={px2dp(75)}
height={256}
width={256}
labels={() => ''}
/>
参数
这里写的参数只是基础的几个，想要进行扩展去看下官方文档，写的非常详尽。
data
类似于json形式，x代表数据的类型，y是数据的值；也可以是纯数组的形式。
colorScale
这个参数指每个类型的颜色，是一组数组，顺序按照data中给出的顺序。如：
const colorScale = ['tomato', 'orange', 'gold', 'navy'];
innerRadius
指的是圆形中间的圆半径大小。如果设置为0就是一个纯饼图。
height,width
设置整个svg的大小，不设置默认为填充父组件。
labels
标签名，将data进行处理后渲染到图中。因为需求中不显示标签名，所以设置为()=>{}
<VictoryPie
data={sampleData}
labels={(d) => `y: ${d.y}`}
/>
padding
内边距大小。这个属性默认并不为0，所以会在分辨率不同的设备上显示不一，建议设置为0，然后在整个组件外部包个View进行显示。
图例
<VictoryLegend
padding={{ top: 0, left: 0 }}
title=""
orientation="vertical"
style={{ labels: { fontSize: sizes.f2 } }}
gutter={px2dp(25)}
data={[
{
name: '净值',
symbol: { fill: 'tomato', type: 'square' },
},
{
name: '已用',
symbol: { fill: 'orange', type: 'square' },
},
{
name: '可用',
symbol: { fill: 'gold', type: 'square' },
},
{ name: '总盈亏', symbol: { fill: 'navy', type: 'square' } },
]}
width={px2dp(150)}
/>
参数
title
整个图例的名字。如title='图例'
data
类似于json的数据结构，包含图例名(name)，和图例样式(type)以及图例颜色(fill)。
gutter
指的是每条图例之间的间距。
orientation
图例的排列方式。横排或纵排。
