今回は、ReactNaitveにグラフを実装する方法について紹介していきます。
1. 概要
1.1 react-native-chart-kitについて
react-native-chart-kit を使うことで、以下の計7種類のグラフを実装することができます。
折れ線グラフ ←本記事で解説数値が増減しているか、変化の方向を見ることができるグラフ
ベジェ折れ線グラフ ←本記事で解説
折れ線グラフの線が滑らかになったグラフ
プログレスリング
割合を表示
棒グラフ
棒の高さで、数値の大小を比較することが可能
積み上げチャート
2つ以上の棒が組み合わさった棒グラフ。よく、累計を出す時に使う。
円グラフ
全体の中での構成比を表す
貢献度グラフ（ヒートマップ）
エリアごとにデータの数値を強弱で色分けしたグラフ。
また、開発者の貢献活動を表示するためによく使用されます。
以上のグラフをreact-native-chart-kitライブラリを使うことで表示させることができます。
本記事では、「折れ線グラフ」と「ベジェ折れ線グラフ」について実装していきます。
(後日、別のグラフについて実装していきます。)
2. パッケージのインストール
以下のコマンドを実行して、chart-kitライブラリをインストールします。
|
1 |
npm install --save react-native-chart-kit |
また、プロジェクト起動後に「react-native-svg」もインストールしてください。と言われるので、先に以下のコマンドを実行してインストールします。
|
1 |
npm install --save react-native-svg |
3. 折れ線グラフの基本的な使い方
3.1 コンポーネントのインポート
|
1 |
import { LineChart } from "react-native-chart-kit"; |
3.2 基本的な使い方(実装方法)
主に以下の3点を設定する必要があります。
data- グラフに表示させたいデータを設定
- 横軸のラベルを設定
- ドット(◯)の色、サイズを設定
- グラフのタイトルを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const data = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { data: [ Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100 ], color: (opacity = 1) => "black", strokeWidth: 2 } ], legend: ["学習時間"] }; |
chartConfing
- ラベルの色を設定
- 背景のグラデーションを設定
|
1 2 3 4 5 6 7 8 |
const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, // 色なし backgroundGradientTo: "black", backgroundGradientToOpacity: 0, // 色なし color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, barPercentage: 0.5, }; |
LineChartコンポーネント
- 上記の「data」と「chartConfig」を設定
- グラフの高さ、横幅を設定
- グラフのドット、線、ラベル、単位の表示の有無を設定。
これらの機能はデフォルトで、設定されている。 - fromZeroがtrueの時、縦軸の最小値が0に設定される。
|
1 2 3 4 5 6 7 8 |
<LineChart data={data} chartConfig={chartConfig} width={windowWidth * 0.99} height={220} yAxisSuffix={"%"} fromZero={true} /> |
3.3 サンプルコード
react-native-chart-kit を参考に作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import React from 'react'; import { StyleSheet, Text, View, Dimensions, } from 'react-native'; import { LineChart } from "react-native-chart-kit"; const windowWidth = Dimensions.get("window").width; const data = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { data: [ Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100 ], color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, strokeWidth: 2 } ], legend: ["学習時間"] }; const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, barPercentage: 0.5, }; export default class App extends React.Component { render() { return ( <View style={styles.container}> <View style={styles.border}> <Text style={styles.text}>折れ線グラフ</Text> <LineChart data={data} width={windowWidth * 0.99} height={220} chartConfig={chartConfig} yAxisSuffix={"%"} fromZero={true} /> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, border: { borderWidth: 1, borderColor: "lightgray", borderRadius: 20, }, text: { fontSize: 25, fontWeight: "bold", textAlign: "center", margin: 10, }, }); |
結果
3.4 ベジェ折れ線グラフ
ベジェ折れ線グラフの実装方法は、折れ線グラフのソースコードに
bezier
を追加することで、折れ線グラフを滑らかで曲線にすることができる。
サンプルコード
|
1 2 3 4 5 6 7 8 9 |
<LineChart data={data} width={windowWidth * 0.99} height={220} chartConfig={chartConfig} yAxisSuffix={"%"} fromZero={true} bezier // これを追加 /> |
結果
4. 参考
5. まとめ
今回は、「折れ線グラフ」と「ベジェ折れ線グラフ」について実装しました。
dataプロパティにグラフ化したい値を設定するだけで、グラフ化できるので、かなり便利ですね。
次の記事で他のグラフの実装方法について紹介していきます。
