半岛权威十大直营(官方)网站

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仿真器中测试您的应用程序或使用手机。

$ npm install @highcharts/highcharts-react-native

Highcharts图表

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

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

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

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

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正版授权的朋友可以