今回は、ReactNaitveに円グラフを実装する方法について紹介していきます。
1. 概要
1.1 react-native-chart-kitについて
react-native-chart-kit を使うことで、以下の計7種類のグラフを実装することができます。
折れ線グラフ数値が増減しているか、変化の方向を見ることができるグラフ
折れ線グラフ編 ←こちらの記事で解説
ベジェ折れ線グラフ
折れ線グラフの線が滑らかになったグラフ
折れ線グラフ編 ←こちらの記事で解説
円グラフ ←本記事で解説
全体の中での構成比を表す
プログレスリング ←本記事で解説
割合を表示
棒グラフ
棒の高さで、数値の大小を比較することが可能
棒グラフ編 ←こちらの記事で解説
積み上げチャート
2つ以上の棒が組み合わさった棒グラフ。よく、累計を出す時に使う。
積み上げグラフ編 ←こちらの記事で解説
貢献度グラフ（ヒートマップ）
エリアごとにデータの数値を強弱で色分けしたグラフ。
また、開発者の貢献活動を表示するためによく使用されます。
以上のグラフをreact-native-chart-kitライブラリを使うことで表示させることができます。
本記事では、「円グラフ」と「プログレスリング」について実装していきます。
 | React Native Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 新品価格 |
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 { PieChart } from "react-native-chart-kit"; |
3.2 基本的な使い方(実装方法)
主に以下の3点を設定する必要があります。
data| 名前 | 説明 |
| name | 各データの名前 |
| population | 各データの数値 |
| color | 各データの色 |
| legendFontColor | 各データのラベルの色 |
| legendFontSize | 各データのラベルサイズ |
|
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 |
const data = [ { name: "Seoul", population: 60, color: "hsla(0, 0%, 0%, 1)", legendFontColor: "#7F7F7F", // ラベルの色 legendFontSize: 15 // ラベルサイズ }, { name: "Toronto", population: 40, color: "hsla(0, 0%, 20%, 0.8)", legendFontColor: "#7F7F7F", legendFontSize: 15 }, { name: "Beijing", population: 33, color: "hsla(0, 0%, 40%, 0.6)", legendFontColor: "#7F7F7F", legendFontSize: 15 }, { name: "New York", population: 21, color: "hsla(0, 0%, 60%, 0.4)", legendFontColor: "#7F7F7F", legendFontSize: 15 }, { name: "Moscow", population: 9, color: "hsla(0, 0%, 80%, 0.2)", legendFontColor: "#7F7F7F", legendFontSize: 15, } ]; |
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) => "black", }; |
LineChartコンポーネント
| 名前 | 説明 |
| data | グラフに表示されるデータ |
| chartConfig | グラフの構成/デザイン |
| width | グラフ全体の横幅 |
| height | グラフ全体の高さ |
| accessor | data数値が取得されるオブジェクトのプロパティ |
| bgColor | 背景色-透明に設定する場合は、入力transparentまたはnone。 |
| paddingLeft | 円グラフの左の間隔 |
| absolute | 絶対値を表示。 trueの時、%(単位)が表示が表示されなくなる。(デフォルトは、true) |
|
1 2 3 4 5 6 7 8 9 10 |
<PieChart data={data} chartConfig={chartConfig} width={windowWidth * 0.99} height={windowHeight/4} accessor="population" bgColor="transparent" paddingLeft={10} // absolute /> |
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 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import React from 'react'; import { StyleSheet, Text, View, Dimensions, } from 'react-native'; import { PieChart } from "react-native-chart-kit"; const windowWidth = Dimensions.get("window").width; const windowHeight = Dimensions.get("window").height; const data = [ { name: "Seoul", population: 60, color: "hsla(0, 0%, 0%, 1)", legendFontColor: "#7F7F7F", // ラベルの色 legendFontSize: 15 // ラベルサイズ }, { name: "Toronto", population: 40, color: "hsla(0, 0%, 20%, 0.8)", legendFontColor: "#7F7F7F", legendFontSize: 15 }, { name: "Beijing", population: 33, color: "hsla(0, 0%, 40%, 0.6)", legendFontColor: "#7F7F7F", legendFontSize: 15 }, { name: "New York", population: 21, color: "hsla(0, 0%, 60%, 0.4)", legendFontColor: "#7F7F7F", legendFontSize: 15 }, { name: "Moscow", population: 9, color: "hsla(0, 0%, 80%, 0.2)", legendFontColor: "#7F7F7F", legendFontSize: 15, } ]; const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, color: (opacity = 1) => "black", }; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>円グラフ</Text> <PieChart data={data} width={windowWidth * 0.99} height={windowHeight/4} chartConfig={chartConfig} accessor="population" bgColor="transparent" paddingLeft={10} // absolute /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, text: { fontSize: 25, fontWeight: "bold", textAlign: "center", margin: 10, }, }); |
結果
4. プログレスリング
4.1 コンポーネントのインポート
|
1 |
import { ProgressChart } from "react-native-chart-kit"; |
4.2 基本的な使い方(実装方法)
円グラフと同様に以下の3点を設定する必要があります。
data| 名前 | 説明 |
| labels | 横軸のラベル |
| data | 各データの数値 |
|
1 2 3 4 5 6 7 8 |
const data = { labels: ["Swim", "Bike", "Run"], data: [ Math.random() * 0.9, Math.random() * 0.9, Math.random() * 0.9 ] }; |
chartConfing
| 名前 | 説明 |
| backgroundGradientFrom | 背景の線形グラデーションの最初の色 |
| backgroundGradientFromOpacity | 背景の線形グラデーションの最初の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| backgroundGradientTo | 背景の線形グラデーションの2番目の色を定義 |
| backgroundGradientToOpacity | 背景の線形グラデーションの2番目の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| color | グラフの色 |
| labelColor | ラベルの色 |
|
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})`, labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, }; |
LineChartコンポーネント
| 名前 | 説明 |
| data | グラフに表示されるデータ |
| chartConfig | グラフの構成/デザイン |
| width | グラフ全体の横幅 |
| height | グラフ全体の高さ |
| strokeWidth | グラフの幅 |
| hideLegend | tureの時、グラフのラベルを非表示にする。 デフォルトは、false |
|
1 2 3 4 5 6 7 8 |
<ProgressChart data={data} chartConfig={chartConfig} width={windowWidth * 0.99} height={windowHeight/4} strokeWidth={20} // hideLegend = { 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 |
import React from 'react'; import { StyleSheet, Text, View, Dimensions, } from 'react-native'; import { ProgressChart } from "react-native-chart-kit"; const windowWidth = Dimensions.get("window").width; const windowHeight = Dimensions.get("window").height; const data = { labels: ["Swim", "Bike", "Run"], data: [ Math.random() * 0.9, Math.random() * 0.9, Math.random() * 0.9 ] }; const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, // グラフの色 labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, // ラベルの色 }; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>プログレスリング</Text> <ProgressChart data={data} chartConfig={chartConfig} width={windowWidth * 0.99} height={windowHeight/4} strokeWidth={20} // hideLegend = { true } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, text: { fontSize: 25, fontWeight: "bold", textAlign: "center", margin: 10, }, }); |
5. 参考
5. まとめ
今回は、「円グラフ」と「プログレスリング」について実装しました。
割合表示したい時に使うとユーザーに伝えやすくておすすめです。
以下に「折れ線グラフ」と「棒グラフ」についての記事のリンクも貼っておきます。
今回は、ReactNaitveにグラフを実装する方法について紹介していきます。 1. 概要 1.1 react-native-chart-kitについて react-native-chart-kit を使うことで、以下の …
今回は、ReactNaitveに棒グラフを実装する方法について紹介していきます。 1. 概要 1.1 react-native-chart-kitについて react-native-chart-kit を使うことで、以下 …
