开源图表库Highcharts教程：使用Highcharts和React Native创建移动图表-控件新闻-慧都网

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

翻译|使用教程|编辑：吴园园|2020-03-04 13:38:36.387|阅读 908 次

概述：在本教程中，我们将向您展示如何开始使用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教程：使用Highcharts和React Native创建移动图表

下一步是设置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'
    }
});

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