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

點(diǎn)擊下載Highcharts最新試用版

搭建環(huán)境

對(duì)于這個(gè)項(xiàng)目，我們將使用Expo App工具來創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序，并且只關(guān)注代碼。

安裝

由于會(huì)定期使用Expo App工具，因此最好在全球進(jìn)行安裝。為此，請(qǐng)打開終端并運(yùn)行以下命令行以及-gglobal 選項(xiàng)：$npm install -g expo-cli

要?jiǎng)?chuàng)建我們的應(yīng)用程序“ hcreact”，請(qǐng)運(yùn)行以下命令 $expo init hcreact

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

$ cd hcreact/
$ npm start

npm start命令將在端口19000上啟動(dòng)服務(wù)器，您可以在iOS / Android仿真器中測(cè)試您的應(yīng)用程序或使用手機(jī)。

$ npm install @highcharts/highcharts-react-native

Highcharts圖表

在App.js文件中，導(dǎo)入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'
    }
});

想要購(gòu)買Highcharts正版授權(quán)的朋友可以