こんにちは！
個人開発者です。今回は、React Nativeでアプリを作成していて円グラフを使ったライブラリを紹介します。
円グラフをネットで色々と調べたのですが、しっくりとするものがなかったり、非推奨になっていたりとうまく動かなかったので自分のような方の参考になれば幸いです。
ちなみに↓のようなアプリを作っています。
react-native-chart-kit
今回使用したものはreact-native-chart-kitというライブラリです。
こちらですが、簡単にグラフが作成できるライブラリになっていてシンプルで美しいデザインの表を作ることが可能です！
円グラフ、棒グラフ、折れ線グラフなど様々なグラフの作成が可能です。
個人的にはとっても使いやすかったのでぜひ使ってみて下さい。
導入
こちらのライブラリの導入方法を解説していきます。
npmかyarnで導入していきましょう。
yarn add react-native-chart-kit
# react-native-svgも必要なのでインストールしておきましょう
yarn add react-native-svginstallしましたら念の為、package.jsonファイルを確認しておきましょう。
"react-native-chart-kit": "^6.12.0",
"react-native-svg": "^15.11.1"
インストールされていることを確認しましょう。上記のようになっていたらOKです。
使い方
まずは動かしてみる！
ライブラリを導入したので早速円グラフを作ってみましょう。
まずはコピペでもいいので以下のコードを貼り付けてみて動かしてみましょう。細かい説明は次に説明していきます。
グラフを使うためには元となるデータが必要なので宣言しておきます。
データの形式は配列のオブジェクトとして宣言しときます。
const data = [
{
name: "Kyoto",
population: 2500000,
color: "rgba(131, 167, 234, 1)",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
{
name: "Oosaka",
population: 8800000,
color: "#F00",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
{
name: "Tokyo",
population: 14000000,
color: "red",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
{
name: "Aichi",
population: 7500000,
color: "#9D9D9D",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
]データの設定が終わりましたら、続いてグラフの設定項目を宣言していきます。
const chartConfig = {
backgroundGradientFrom: "#1E2923",
backgroundGradientFromOpacity: 0,
backgroundGradientTo: "#08130D",
backgroundGradientToOpacity: 0.5,
color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
strokeWidth: 2, // optional, default 3
};
設定が完了したので、円グラフを表示していきます。
PiChartというコンポーネントにデータを渡すだけで簡単に円グラフの作成が可能です。
<PieChart
data={data}
width={400}
height={220}
chartConfig={chartConfig}
accessor="population"
backgroundColor="transparent"
paddingLeft="15"
absolute
/>以下のような円グラフが表示されます。
ここまではコードだけの表示でしたがそれぞれの設定項目の詳細を説明していきます！
プロパティの説明
data
円グラフの元となるデータです。
const data = [
{
name: "Kyoto",
population: 2500000,
color: "rgba(131, 167, 234, 1)",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
{
name: "Oosaka",
population: 8800000,
color: "#F00",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
{
name: "Tokyo",
population: 14000000,
color: "red",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
{
name: "Aichi",
population: 7500000,
color: "#9D9D9D",
legendFontColor: "#7F7F7F",
legendFontSize: 12,
},
]それぞれのプロパティを説明していきます。
| プロパティ | 説明 |
| name | データの名前を指定して下さい。円グラフの横に表示される文字になる |
| population | 実際のデータ。名前はなんでもいいですが、データは数値で指定 |
| color | 円グラフの色 |
| legendFontColor | 円グラフの横の説明テキストの色 |
| legendFontSize | 円グラフの横の説明テキストの大きさ |
config
グラフ自体の設定です。ただし、円グラフではあまり必要がないですが設定しとかないとエラーになるので設定しておいて下さい。
const chartConfig = {
backgroundGradientFrom: "#1E2923",
backgroundGradientFromOpacity: 0,
backgroundGradientTo: "#08130D",
backgroundGradientToOpacity: 0.5,
color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
strokeWidth: 2, // optional, default 3
};
| プロパティ | 説明 |
| backgroundGradientFrom | 線形のグラフを使うときのグラデーションの最初の色 |
| backgroundGradientFromOpacity | 線形グラフを使うときのグラデーションの最初の不透明度 |
| backgroundGradientTo | 線形のグラフを使うときのグラデーションの最後の色 |
| backgroundGradientToOpacity | 線形グラフを使うときのグラデーションの最後の不透明度 |
| color | ラベルなどの基本色 （data項目でlegendFontColorを指定しましたが、指定しない場合にはここで使用した色がつかわれます。） |
| strokeWidth | チャートのベースストローク幅 |
より詳細は以下の公式のプロパティを確認して下さい。
最低限の設定のみを記載してます。
PieChart
<PieChart
data={data}
width={400}
height={220}
chartConfig={chartConfig}
accessor="population"
backgroundColor="transparent"
paddingLeft="15"
absolute
/>| プロパティ | 説明 |
| data | data項目で設定したデータ |
| width | グラフの表示横幅 |
| height | グラフの表示縦幅 |
| chartConfig | 設定 （chartConfigで設定した値を渡します） |
| accessor | dataのどの項目を基準としてグラフを作成するかを指定します。 data項目で実際に作成した値を設定したキーを指定します。（上記設定した値ではpopulation） |
| backgroundColor | 透明、透明入力を設定 tranparentかnoneを指定 |
| paddingLeft | paddingLeftで左側の余白を指定できる |
他のプロパティは公式のプロパティ部分を確認して下さい。
終わり
React Nativeの円グラフの作成方法を見てきました。
グラフはアプリ開発しているときに避けては通れないですよね。
私のアプリでも使用しています。
中々解説している日本語サイトがなかったので開発の役に立てれば幸いです！ノシ
よければ私の開発したiosアプリ使ってみて下さい！
コメント