翻譯|使用教程|編輯:吳園園|2020-03-04 13:38:36.387|閱讀 964 次
概述:在本教程中,我們將向您展示如何開始使用React Native的官方Highcharts包裝器。我們將從設置環(huán)境開始,然后跳轉(zhuǎn)以創(chuàng)建一個簡單的Highcharts演示。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
Highcharts是一款純JavaScript編寫的圖表庫,為你的Web網(wǎng)站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。
搭建環(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現(xiàn)在,我們準備添加自己的代碼。
Highcharts圖表
在App.js文件中,導入highcharts-react-native-official。
import HighchartsReactNative from '@highcharts/highcharts-react-native';最簡單的圖表是帶有以下內(nèi)容的折線圖data:[1, 3, 2]。為此,我們需要創(chuàng)建一個對象(選項),然后傳遞數(shù)據(jù):
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正版授權(quán)的朋友可以
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務必注明出處、不得修改原文相關鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: