react-native-apex-charts

apex react-native charts library

Usage no npm install needed!

<script type="module">
  import reactNativeApexCharts from 'https://cdn.skypack.dev/react-native-apex-charts';
</script>

README

react-native-apex-charts

A React Native module that allows you to use native chart UI .

此组件参照MPAndroidChart(android版本),Charts(ios版本)为原型实现

Release Notes

  • 1.1.28 1 支持限制线属性配置;2 修正部分bug;3 iOS版本支持框架和源码两种方式Pod安装 4 支持文档生成功能
  • 1.1.27 iOS版本提示框支持xAxisLabelColor、showSeparationLine、labelColor属性配置
  • 1.1.26 修正部分bug
  • 1.1.25 1 支持点击高亮所有属性;2 提示框支持圆角属性;3 改进曲线模式
  • 1.1.10 改bug
  • 1.1.8 支持XY缩放
  • 1.1.7 图例支持自动换行属性;饼图支持绘制百分比属性
  • 1.1.6 线性图支持画空心点及空心点半径颜色;XY支持标题及位置偏移
  • 1.1.5 线性图支持个别点的样式定制;XY轴支持网格虚线及网格颜色
  • 1.1.4 支持提示框、多数据集饼图
  • 1.1.3 支持水平柱状图和混合图
  • 1.1.2 支持默认高亮选中和高亮选中颜色属性配置
  • 1.1.0 支持仪表盘控件
  • 1.0.9 曲线图支持填充属性;X轴标签支持颜色配置;重构JS代码
  • 1.0.8 支持柱状图

Install

第一步(两种方式)

方式1

解压本文件夹到node_modules/react-native-apex-charts

方式2

项目的package.json中配置

"dependencies": {
  "react-native-apex-charts": "file:/Users/xxx/xxx/react-native-apex-charts"
}

第二步

方式1

在项目文件下运行

npm install react-native-apex-charts
react-native link react-native-apex-charts

iOS: 添加其它依赖库

以下文件需要手动添加到项目工程内:

General-Embedded Binaries中添加node_modules/react-native-apex-charts/ios/Charts.framework (此文件也会自动添加到Link Binary With Libraries里)

Build Settings中的Framework Search Paths中,增加:

$(SRCROOT)/../node_modules/react-native-apex-charts/ios

Always Embed Swift Standard Libraries设置为YES

方式2

iOS cocoapods本地安装,在Podfile中添加

pod "RNCharts", :path => '/Users/XXX/XXX/node_modules/react-native-apex-charts/ios'

文档生成步骤

//安装docsify-cli工具(如果安装,跳下一步)
1.npm i docsify-cli -g
//文档初始化(如果已初始化,跳下一步)
2.docsify init ./docs
//生成文档同时打开本地浏览服务
3.npm run buildDocs
//用浏览器打开下面的地址
4.http://localhost:3000

Usage

具体例子详见RNApexUIExample/js/examples/chart/目录: https://github.com/glinjy/RNApexUIExample/tree/dev_chart