今回は、ReactNaitveに貢献度グラフを実装する方法について紹介していきます。
1. 概要
1.1 react-native-chart-kitについて
react-native-chart-kit を使うことで、以下の計7種類のグラフを実装することができます。
折れ線グラフ数値が増減しているか、変化の方向を見ることができるグラフ
折れ線グラフ編 ←こちらの記事で解説
ベジェ折れ線グラフ
折れ線グラフの線が滑らかになったグラフ
折れ線グラフ編 ←こちらの記事で解説
円グラフ
全体の中での構成比を表す
円グラフ編 ←こちらの記事で解説
プログレスリング
割合を表示
プログレスリンググラフ編 ←こちらの記事で解説
棒グラフ
棒の高さで、数値の大小を比較することが可能
棒グラフ編 ←こちらの記事で解説
積み上げチャート
2つ以上の棒が組み合わさった棒グラフ。よく、累計を出す時に使う。
積み上げ線グラフ編 ←こちらの記事で解説
貢献度グラフ（ヒートマップ） ←本記事で解説
・日毎のデータ件数を集計
・回数(件数)に応じて色を決める。(基本的に回数(件数)が多いほど色が濃い)
・このデータを見ることで、過去どれだけ活動したのか可視化することができる。
・実際にGitHubでも活動記録として使われている。
以上のグラフをreact-native-chart-kitライブラリを使うことで表示させることができます。
本記事では、「貢献度グラフ（ヒートマップ）」について実装していきます。
 | React Native Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 新品価格 |
2. パッケージのインストール
以下のコマンドを実行して、chart-kitライブラリをインストールします。
|
1 |
npm install --save react-native-chart-kit |
また、プロジェクト起動後に「react-native-svg」もインストールしてください。と言われるので、先に以下のコマンドを実行してインストールします。
3. 貢献度グラフ
3.1 コンポーネントのインポート
|
1 |
import { ContributionGraph } from "react-native-chart-kit"; |
3.2 基本的な使い方(実装方法)
主に以下の3点を設定する必要があります。
data| 名前 | 説明 |
| date | 日付 |
| count | データ(数値) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const commitsData = [ { date: "2020-01-02", count: 1 }, { date: "2020-01-03", count: 2 }, { date: "2020-01-04", count: 3 }, { date: "2020-01-05", count: 4 }, { date: "2020-01-06", count: 5 }, { date: "2020-01-30", count: 2 }, { date: "2020-01-31", count: 3 }, { date: "2020-03-01", count: 2 }, { date: "2020-04-02", count: 4 }, { date: "2020-03-05", count: 2 }, { date: "2020-02-30", count: 4 } ]; |
chartConfing
| 名前 | 説明 |
| backgroundGradientFrom | 背景の線形グラデーションの最初の色 |
| backgroundGradientFromOpacity | 背景の線形グラデーションの最初の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| backgroundGradientTo | 背景の線形グラデーションの2番目の色を定義 |
| backgroundGradientToOpacity | 背景の線形グラデーションの2番目の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| color | 数値、ラベルの色。ただし、色はdataの色設定の方が優先される。 |
|
1 2 3 4 5 6 7 |
const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, color: (opacity = 1) => `rgba(10, 100, 10, ${opacity})`, }; |
LineChartコンポーネント
| 名前 | 説明 |
| values | グラフに表示されるデータ |
| chartConfig | グラフの構成/デザイン |
| width | グラフ全体の横幅 |
| height | グラフ全体の高さ |
| endDate | 設定した日付までをグラフとして表示 |
| numDays | 設定した数の日付を表示 |
| gutterSize | チャート内の正方形間の溝のサイズ |
| squareSize | チャート内の正方形1つのサイズ |
| onDayPress | チャート内の正方形を押した時に発生するイベント |
|
1 2 3 4 5 6 7 8 9 10 11 |
<ContributionGraph values={commitsData} chartConfig={chartConfig} width={windowWidth} height={220} endDate={new Date("2020-04-01")} numDays={105} gutterSize={3} squareSize={20} onDayPress={() => console.log("press")} /> |
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 |
import React from 'react'; import { StyleSheet, Text, View, Dimensions, } from 'react-native'; import { ContributionGraph } from "react-native-chart-kit"; const windowWidth = Dimensions.get("window").width; const windowHeight = Dimensions.get("window").height; const commitsData = [ { date: "2020-01-02", count: 1 }, { date: "2020-01-03", count: 2 }, { date: "2020-01-04", count: 3 }, { date: "2020-01-05", count: 4 }, { date: "2020-01-06", count: 5 }, { date: "2020-01-30", count: 2 }, { date: "2020-01-31", count: 3 }, { date: "2020-03-01", count: 2 }, { date: "2020-04-02", count: 4 }, { date: "2020-03-05", count: 2 }, { date: "2020-02-30", count: 4 } ]; const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, color: (opacity = 1) => `rgba(10, 100, 10, ${opacity})`, }; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>貢献度グラフ（ヒートマップ）</Text> <ContributionGraph values={commitsData} chartConfig={chartConfig} width={windowWidth} height={220} endDate={new Date("2020-04-01")} numDays={105} gutterSize={3} squareSize={20} onDayPress={() => console.log("press")} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, text: { fontSize: 25, fontWeight: "bold", textAlign: "center", margin: 10, }, }); |
結果
4. 参考
5. まとめ
今回は、「貢献度グラフ」について実装しました。
実際にGitHubでも使われているグラフであるので、いまいちこのグラフのイメージがついていない人は、一度GitHubを見てみるといいかもですね。
以下に「折れ線グラフ」と「棒グラフ」と「円グラフ」についての記事のリンクも貼っておきます。
今回は、ReactNaitveにグラフを実装する方法について紹介していきます。 1. 概要 1.1 react-native-chart-kitについて react-native-chart-kit を使うことで、以下の …
今回は、ReactNaitveに棒グラフを実装する方法について紹介していきます。 1. 概要 1.1 react-native-chart-kitについて react-native-chart-kit を使うことで、以下 …
今回は、ReactNaitveに円グラフを実装する方法について紹介していきます。 1. 概要 1.1 react-native-chart-kitについて react-native-chart-kit を使うことで、以下 …
