开源图表库Highcharts教程：使用Highcharts和React Native创建移动图表

在本教程中，我们将向您展示如何开始使用React Native的官方Highcharts包装器。我们将从设置环境开始，然后跳转以创建一个简单的Highcharts演示。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

搭建环境

对于这个项目，我们将使用Expo App工具来创建一个简单的应用程序，并且只关注代码。

安装

由于会定期使用Expo App工具，因此最好在全球进行安装。为此，请打开终端并运行以下命令行以及-gglobal 选项：$npm install -g expo-cli

要创建我们的应用程序“ hcreact”，请运行以下命令 $expo init hcreact

上一个命令行使用默认项目创建一个文件夹。
让我们按原样运行项目，以确保在对项目进行更改之前一切都已正确设置。
返回终端并运行以下命令：

$ cd hcreact/$ npm start

npm start命令将在端口19000上启动服务器，您可以在iOS / Android仿真器中测试您的应用程序或使用手机。

下一步是设置Highcharts React Wrapper。首先，使用停止终端上正在运行的项目Ctrl+c，然后运行以下命令行以安装Highcharts React Native包装器：

$ npm install @highcharts/highcharts-react-native

现在，我们准备添加自己的代码。

Highcharts图表

在App.js文件中，导入highcharts-react-native-official。

import HighchartsReactNative from '@highcharts/highcharts-react-native';

最简单的图表是带有以下内容的折线图data:[1, 3, 2]。为此，我们需要创建一个对象（选项），然后传递数据：

this.state = {            chartOptions: {                series: [{                    data: [1, 3, 2]                }]            }        };

最后一步是初始化Highcharts。

<HighchartsReactNative                    styles={styles.container}                    options={this.state.chartOptions}                    modules={modules}/>

App.js代码

import React from 'react';import {    StyleSheet,    View} from 'react-native';import HighchartsReactNative from '@highcharts/highcharts-react-native';export default class App extends React.Component {    constructor(props) {        super(props);        this.state = {            chartOptions: {                series: [{                    data: [1, 3, 2]                }]            }        };    }    render() {        return (            <View>                <HighchartsReactNative                    styles={styles.container}                    options={this.state.chartOptions}                    modules={modules}                / >            </View >        );    }}const styles = StyleSheet.create({    container: {        // height: 200,        // width: 200,        backgroundColor: '#fff',        justifyContent: 'center'    }});

就是这样，现在您知道如何使用Highchart包装器React Native设置项目。

希望本教程对您有所帮助。如果您有任何疑问或意见，欢迎在评论区留言。

想要购买Highcharts正版授权的朋友可以咨询官方客服

标签：