react-native-chart-kitを使ってみよう
react-nativeのインストール
公式サイトを参照すること
以下はメモ
brew install yarn brew install node brew install watchman brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8 npm install -g react-native-cli yarn global add create-react-native-app
xcodeのデフォルトではcommandline toolが設定されていなかったので設定します
シミュレータのデフォルトがiphone Xらしいのですが、なくて起動しないので追加しました。
react-native-chart-kitの導入
yarn add react-native-chart-kit react-native-svg
react-native link react-native-svg
import React, {Component} from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from 'react-native-chart-kit'
export default class App extends Component<Props> {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Charts</Text>
<LineChart
data={{
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
]
}]
}}
width={300} // from react-native
height={220}
yAxisLabel={'円'}
chartConfig={{
backgroundColor: '#fff',
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
color: (opacity = 0.5) => `rgba(0, 0, 0,0.5)`,
}}
// bezier
/>
</View>
);
}
}
