【ReactNative】react-native-chart-kitを使ってグラフを実装(円グラフ編)



今回は、ReactNaitveに円グラフを実装する方法について紹介していきます。

1. 概要

1.1 react-native-chart-kitについて

react-native-chart-kit を使うことで、以下の計7種類のグラフを実装することができます

折れ線グラフ
数値が増減しているか、変化の方向を見ることができるグラフ
折れ線グラフ編  ←こちらの記事で解説

ベジェ折れ線グラフ
折れ線グラフの線が滑らかになったグラフ
折れ線グラフ編  ←こちらの記事で解説

円グラフ  ←本記事で解説
全体の中での構成比を表す

プログレスリング  ←本記事で解説
割合を表示

棒グラフ
棒の高さで、数値の大小を比較することが可能
棒グラフ編  ←こちらの記事で解説

積み上げチャート
2つ以上の棒が組み合わさった棒グラフ。よく、累計を出す時に使う。
積み上げグラフ編  ←こちらの記事で解説

貢献度グラフ(ヒートマップ)
エリアごとにデータの数値を強弱で色分けしたグラフ。
また、開発者の貢献活動を表示するためによく使用されます。


以上のグラフをreact-native-chart-kitライブラリを使うことで表示させることができます。

本記事では、「円グラフ」と「プログレスリング」について実装していきます。

React Native Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~

新品価格
¥4,268から
(2020/7/27 08:59時点)

2. パッケージのインストール

以下のコマンドを実行して、chart-kitライブラリをインストールします。


また、プロジェクト起動後に「react-native-svg」もインストールしてください。と言われるので、先に以下のコマンドを実行してインストールします。

3. 円グラフ

3.1 コンポーネントのインポート

3.2 基本的な使い方(実装方法)

主に以下の3点を設定する必要があります。

data
名前 説明
name 各データの名前
population 各データの数値
color 各データの色
legendFontColor 各データのラベルの色
legendFontSize 各データのラベルサイズ


chartConfing
名前 説明
backgroundGradientFrom 背景の線形グラデーションの最初の色
backgroundGradientFromOpacity 背景の線形グラデーションの最初の色の不透明度
0(透明)〜1(不透明)の値で表す。0の時は、無色。
backgroundGradientTo 背景の線形グラデーションの2番目の色を定義
backgroundGradientToOpacity 背景の線形グラデーションの2番目の色の不透明度
0(透明)〜1(不透明)の値で表す。0の時は、無色。
color 数値、ラベルの色。ただし、色はdataの色設定の方が優先される。


LineChartコンポーネント
名前 説明
data グラフに表示されるデータ
chartConfig グラフの構成/デザイン
width グラフ全体の横幅
height グラフ全体の高さ
accessor data数値が取得されるオブジェクトのプロパティ
bgColor 背景色-透明に設定する場合は、入力transparentまたはnone。
paddingLeft 円グラフの左の間隔
absolute 絶対値を表示。
trueの時、%(単位)が表示が表示されなくなる。(デフォルトは、true)


3.3 サンプルコード

react-native-chart-kit を参考に作成


結果



4. プログレスリング

4.1 コンポーネントのインポート

4.2 基本的な使い方(実装方法)

円グラフと同様に以下の3点を設定する必要があります。

data
名前 説明
labels 横軸のラベル
data 各データの数値


chartConfing
名前 説明
backgroundGradientFrom 背景の線形グラデーションの最初の色
backgroundGradientFromOpacity 背景の線形グラデーションの最初の色の不透明度
0(透明)〜1(不透明)の値で表す。0の時は、無色。
backgroundGradientTo 背景の線形グラデーションの2番目の色を定義
backgroundGradientToOpacity 背景の線形グラデーションの2番目の色の不透明度
0(透明)〜1(不透明)の値で表す。0の時は、無色。
color グラフの色
labelColor ラベルの色


LineChartコンポーネント
名前 説明
data グラフに表示されるデータ
chartConfig グラフの構成/デザイン
width グラフ全体の横幅
height グラフ全体の高さ
strokeWidth グラフの幅
hideLegend tureの時、グラフのラベルを非表示にする。
デフォルトは、false


3.3 サンプルコード

react-native-chart-kit を参考に作成



5. 参考

react-native-chart-kit



5. まとめ

今回は、「円グラフ」と「プログレスリング」について実装しました。
割合表示したい時に使うとユーザーに伝えやすくておすすめです。
以下に「折れ線グラフ」と「棒グラフ」についての記事のリンクも貼っておきます。