简介
rn-svg-chart 是一个用于 React Native 的 SVG 图表库，可用于绘制折线图、柱状图、饼图等。由于它基于 SVG 技术开发，因此具有较好的可扩展性和图形还原性。
安装
在使用之前，你需要先安装 rn-svg-chart。
--- - ------------ ------
使用
1. 导入
------ - ---------- --------- -------- - ---- ---------------
2. 折线图
------ - --------- - ---- ---------------
------ - ---------- - ---- ---------------
----- ---- - -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
--
----- ------------- - ------- -- -
----- - ----- - - -------------------------
------ -
----------
-------- ------ ----- - ---- ------- --- --
-----------
-----------
-------------
-------------
--------------------
---------------
--
--
--3. 柱状图
------ - -------- - ---- ---------------
------ - ---------- - ---- ---------------
----- ---- - -
- -- ---------- -- -- --
- -- ---------- -- -- --
- -- ---------- -- -- --
- -- ---------- -- -- --
- -- ---------- -- -- --
- -- ---------- -- -- --
- -- ---------- -- -- --
--
----- ------------ - ------- -- -
----- - ----- - - -------------------------
------ -
---------
-------- ------ ----- - ---- ------- --- --
-----------
-----------
-------------
-------------
------------------
---------------------
-----------------
-------
--
--
--4. 饼图
------ - -------- - ---- ---------------
------ - ---------- - ---- ---------------
----- ---- - -
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
--
----- ------ - ----------- ---------- ---------- ---------- ---------- ---------- -----------
----- ------------ - ------- -- -
----- - ----- - - -------------------------
------ -
---------
-------- ------ ----- - ---- ------- --- --
-----------
---------------
-----------------
--
--
--API
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| style | object | - | 组件样式 |
| data | array | [] | 数据源 |
| gridMin | number | - | 坐标系最小值 |
| gridMax | number | - | 坐标系最大值 |
| gridStep | number | - | 坐标系刻度数 |
| strokeColor | string | - | 线条颜色 |
| strokeWidth | number | - | 线条粗细 |
| fillColor | string | - | 填充颜色 |
| gap | number | - | 两柱之间的距离 |
| colors | array | [] | 饼图颜色 |
| innerRadius | number | - | 饼图内半径 |
结语
rn-svg-chart 是一个非常实用的图表库，可以帮助你快速构建各种图表。希望本文的介绍可以帮助你更好地使用它，欢迎大家使用和提出意见，谢谢！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671f81e8991b448e3860