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

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

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

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


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

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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/blog/tutorials/creating-mobile-charts-with-highcharts-react-native/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat