随着移动互联网的发展，前端框架的技术也在不断地更新，基于React Native框架的图表库rn-highcharts开发出来，是一个非常适合移动端的图表库，集成性较强，使用方便简单。本文就来介绍rn-highcharts的使用教程。
安装
使用npm包管理器，通过以下代码进行安装
npm install react-native-highcharts --save
示例代码
以下是一个最简单的rn-highcharts渲染demo
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------- ---- --------------------------
----- ------------ - -- -- -
----- ------- - -
------ -
----- ------
--
------ -
----- ------ -------------
--
------ -
----------- ---------- ---------- -----------
--
------ -
------ -
----- ------ -------
--
--
------- -
-
----- -------
----- --- -- ---
--
-
----- -------
----- --- -- ---
--
--
--
------ ---------------------- ----------------- ---
--
------ ------- -------------API
该组件继承了所有Highcharts的选项，并将其列在options里面。以下列出了一些可重写的特定选项：
- onLoad：Highcharts库加载完毕的回调函数回调
- onMessage：获取webview内的消息回调
- styles：修改默认样式
- maxWebViewInstance：同时允许使用的webview实例数的最大值。
配置简介
在options中，可以设置chart、title、xAxis、yAxis和series等。示例如下：
chart
配置图表类型，如折线图、柱状图等等。常用属性有：
chart: {
type: 'line', // 图表类型，如折线图，柱状图等等
backgroundColor: '#fff', // 背景颜色
borderRadius: 8, // 圆角角度
reflow: true, // 是否重绘图表
inverted: false, // 是否倒置
zoomType: 'x', // 缩放类型
}title
配置图表标题，包括中文、颜色、或者格式等。常用属性有：
-- -------------------- ---- -------
------ -
----- ------ ------- -- ----
------ ------- -- ------
------ -
------ ------- -- ------
--------- --- -- ------
----------- ------- -- ------
--
-xAxis
在图表中配置X轴，包括刻度大小和类型，坐标轴颜色，间隔等。常用属性有：
-- -------------------- ---- -------
------ -
----------- - ------ ------ ------ ------ -------
---------- ----- ----------
-------
------ -
-- ----
--------- ---
------ -------
--
--------- --- -- ----
----- -- -- -------
--
-------
----- -------- -- ------
------ -
------ ------- -- ----
----------- --------- -- ------
--
--
-------------- --- -- -- -- --- -- -----
- yAxis
在图表中配置Y轴，包括刻度大小和类型，坐标轴颜色，间隔等。常用属性有：
-- -------------------- ---- -------
----- - -
-------
----- ------ -- ----
------ -
------ ------- -- ------
----------- --------- -- --------
--
--
-------------- -------------------- -- -----
------------------ -----
---------- -- -- ----
---------- ------- -- ----
-------------- ------- -- -----
-------------- -- -- -----
-series
在图表中绘制数据，如柱状图、折线图。常用属性有：
-- -------------------- ---- -------
------ - --
----- ------ -- ----
----- ----- ---- ---- ---- ----- -- ---
------ -------- -- ----
---------------- -- ------
----- --------- -- ----
------ -- -- -------
--------- -- ---------------
------------ ----
-------------- --
------------------ -------------------------------------------------- --------------------
--
--总结
现在你已经掌握了rn-highcharts的使用方法了，应该可以独立的应对大部分的图表需求了。但是实践是检验真理的唯一标准，写更多的示例才是更好的学习方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556de81e8991b448d3ba2