Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

搭建環(huán)境

對于這個項目，我們將使用Expo App工具來創(chuàng)建一個簡單的應用程序，并且只關注代碼。

安裝

由于會定期使用Expo App工具，因此最好在全球進行安裝。為此，請打開終端并運行以下命令行以及-gglobal 選項：$npm install -g expo-cli

要創(chuàng)建我們的應用程序“ hcreact”，請運行以下命令 $expo init hcreact

上一個命令行使用默認項目創(chuàng)建一個文件夾。
讓我們按原樣運行項目，以確保在對項目進行更改之前一切都已正確設置。
返回終端并運行以下命令：

$ 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正版授權(quán)的朋友可以