今回は、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 { BarChart } from "react-native-chart-kit"; |
3.2 基本的な使い方(実装方法)
主に以下の3点を設定する必要があります。
data| 名前 | 説明 |
| labels | 横軸のラベル |
| datasets | 縦軸のデータ(数値) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const data = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { data: [ Math.floor(Math.random() * 10000)/ 100, // データ1 Math.floor(Math.random() * 10000)/ 100, // データ2 Math.floor(Math.random() * 10000)/ 100, // データ3 Math.floor(Math.random() * 10000)/ 100, // データ4 Math.floor(Math.random() * 10000)/ 100, // データ5 Math.floor(Math.random() * 10000)/ 100, // データ6 ], } ] }; |
chartConfing
| 名前 | 説明 |
| backgroundGradientFrom | 背景の線形グラデーションの最初の色 |
| backgroundGradientFromOpacity | 背景の線形グラデーションの最初の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| backgroundGradientTo | 背景の線形グラデーションの2番目の色を定義 |
| backgroundGradientToOpacity | 背景の線形グラデーションの2番目の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| fillShadowGradient | グラフの色 |
| fillShadowGradientOpacity | グラフの色の不透明度 0(透明)〜1(不透明)の値で表す。 |
| color | 数値、ラベルの色 |
| barPercentage | グラフの横幅 |
|
1 2 3 4 5 6 7 8 9 10 |
const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, fillShadowGradient: "gray", fillShadowGradientOpacity: 0.7, color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, barPercentage: 1, }; |
LineChartコンポーネント
| 名前 | 説明 |
| data | グラフに表示されるデータ |
| chartConfig | グラフの構成/デザイン |
| width | グラフ全体の横幅 |
| height | グラフ全体の高さ |
| yAxisSuffix | グラフの縦軸テキストの後に表示されるテキスト |
| fromZero | 最小値が0から始まる |
| showValuesOnTopOfBars | バーの上に値を表示 |
|
1 2 3 4 5 6 7 8 9 |
<BarChart data={data} chartConfig={chartConfig} width={windowWidth * 0.99} height={windowHeight/2} yAxisSuffix={"%"} fromZero={true} showValuesOnTopOfBars={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 |
import React from 'react'; import { StyleSheet, Text, View, Dimensions, } from 'react-native'; import { BarChart } from "react-native-chart-kit"; const windowWidth = Dimensions.get("window").width; const windowHeight = Dimensions.get("window").height; const data = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { data: [ Math.floor(Math.random() * 10000) / 100, // データ1 Math.floor(Math.random() * 10000) / 100, // データ2 Math.floor(Math.random() * 10000) / 100, // データ3 Math.floor(Math.random() * 10000) / 100, // データ4 Math.floor(Math.random() * 10000) / 100, // データ5 Math.floor(Math.random() * 10000) / 100, // データ6 ], } ] }; const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, fillShadowGradient: "gray", fillShadowGradientOpacity: 0.7, color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, barPercentage: 1, }; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>棒グラフ</Text> <BarChart data={data} width={windowWidth * 0.99} height={windowHeight / 2} chartConfig={chartConfig} yAxisSuffix={"%"} fromZero={true} showValuesOnTopOfBars={true} /> </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 { StackedBarChart } from "react-native-chart-kit"; |
4.2 基本的な使い方(実装方法)
棒グラフと同様に以下の3点を設定する必要があります。
data| 名前 | 説明 |
| labels | 横軸のラベル |
| legend | 縦軸のデータの数(名称) |
| data | 縦軸のデータ(数値) |
| barColors | グラフの色 |
|
1 2 3 4 5 6 7 8 9 |
const data = { labels: ["Test1", "Test2"], legend: ["L1", "L2", "L3"], data: [ [60, 60, 60], [30, 30, 60] ], barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"] }; |
chartConfing
| 名前 | 説明 |
| backgroundGradientFrom | 背景の線形グラデーションの最初の色 |
| backgroundGradientFromOpacity | 背景の線形グラデーションの最初の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| backgroundGradientTo | 背景の線形グラデーションの2番目の色を定義 |
| backgroundGradientToOpacity | 背景の線形グラデーションの2番目の色の不透明度 0(透明)〜1(不透明)の値で表す。0の時は、無色。 |
| color | 数値、ラベルの色 |
| barPercentage | グラフの横幅 |
|
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: 1.5, }; |
LineChartコンポーネント
| 名前 | 説明 |
| data | グラフに表示されるデータ |
| chartConfig | グラフの構成/デザイン |
| width | グラフ全体の横幅 |
| height | グラフ全体の高さ |
|
1 2 3 4 5 6 |
<StackedBarChart data={data} chartConfig={chartConfig} width={windowWidth * 0.98} height={windowHeight/2} /> |
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 |
import React from 'react'; import { StyleSheet, Text, View, Dimensions, } from 'react-native'; import { StackedBarChart } from "react-native-chart-kit"; const windowWidth = Dimensions.get("window").width; const windowHeight = Dimensions.get("window").height; const data = { labels: ["Test1", "Test2"], legend: ["L1", "L2", "L3"], data: [ [60, 60, 60], [30, 30, 60] ], barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"] }; const chartConfig = { backgroundGradientFrom: "black", backgroundGradientFromOpacity: 0, backgroundGradientTo: "black", backgroundGradientToOpacity: 0, color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, barPercentage: 1.5, }; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>積み上げチャート</Text> <StackedBarChart data={data} width={windowWidth * 0.98} height={windowHeight/2} chartConfig={chartConfig} fromZero={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. まとめ
今回は、「棒グラフ」と「積み上げチャート」について実装しました。
折れ線グラフと実装の仕方も同じような感じですね。
dataプロパティにグラフ化したい値を設定するだけで、グラフ化できるので、かなり便利です。
以下に折れ線グラフについての記事のリンクも貼っておきます。
今回は、ReactNaitveにグラフを実装する方法について紹介していきます。 1. 概要 1.1 react-native-chart-kitについて react-native-chart-kit を使うことで、以下の …
