僕はランニングする時にNRCを愛用しています。
このアプリのグラフをReact Native Chart Kitというライブラリで再現できないか試してみた。
まずはインストールから。
yarn add react-native-chart-kit react-native-svg
実際に実装してみる。今回使用するのはBarChartコンポーネント。
<BarChart
// onDataPointClick={(data) => console.log(data)}
data={data}
width={screenWidth}
height={220}
yAxisLabel=""
yAxisSuffix=""
segments={3}
chartConfig={{
backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,
barRadius: 5,
color: (opacity = 1) => `rgba(240, 157, 77, ${opacity})`,
barPercentage: 0.7,
fillShadowGradientFromOpacity: 1,
fillShadowGradientToOpacity: 1,
decimalPlaces: 0,
propsForBackgroundLines: {
strokeDasharray: 0,
stroke: "#e4e3e4",
strokeWidth: 1,
},
propsForHorizontalLabels: {
stroke: "#333333",
fontWeight: "lighter",
fontSize: "10",
},
propsForVerticalLabels: {
stroke: "#333333",
fontWeight: "lighter",
fontSize: "10",
},
}}
verticalLabelRotation={0}
showBarTops={false}
fromZero={true}
showValuesOnTopOfBars={true}
withVerticalLabels={true}
withHorizontalLabels={true}
/>;
僕の実力だとこのくらいまでしかできなかった。横に表示されているラベルを右に表示したかったのだけど、普通には設定できないぽくて断念した。
設定に使用した各プロパティを解説する。
data
labelsは横軸に表示されるラベルの値。datasets[0].dataの値は縦軸の値。labelsとdatasets[0].dataの各要素の値は１対１で対応している。なので、要素数を合わせる必要がある。
{ labels: ["日", "月", "火", "水", "木", "金"], datasets: [ { data: [20, 45, 28, 80, 99, 43], }, ], }
width
グラフ全体が表示される幅の値。この値の取得方法はreact-nativeパッケージのDimensionsを使ってDimensions.get("window").widthの値を設定する。
height
チャートの高さ。
yAxisLabel
一番左に表示されるラベルの先頭に付与する値。お金を表すチャートの場合は￥マークを指定したりすると￥100みたいに表示される。
yAxisSuffix
一番左に表示されるラベルの末尾に付与する値。割合を表すチャートの場合は%マークを指定したりすると100%みたいに表示される。
segments
背景に表示される横線の数を指定する。僕の場合は3を指定した。
chartConfig
チャートの設定に関するオブジェクト。BarChartに限らずいろいろなコンポーネントで共通の設定オブジェクト。
backgroundGradientFromOpacity
グラフの背景色における線形グラデーションの最初の色の不透明度をnumberで指定する。0から1までを指定できる。1に近い値を指定するほど黒に近い色になる。逆に0に近い値を指定するほど白に近い色になる。
backgroundGradientToOpacity
グラフの背景色における線形グラデーションの2番目の色の不透明度をnumberで指定する。0から1までを指定できる。1に近い値を指定するほど黒に近い色になる。逆に0に近い値を指定するほど白に近い色になる。
barRadius
各バーの半径をnumberで指定する。丸みを追加できる。
color
opacity: numberを引数で受け取る関数を指定する。(opacity = 1) => `rgba(240, 157, 77, ${opacity})`,のように文字列で作成したrgba()を返す。
barPercentage
表示されるバーの横幅を0から1のnumberで指定する。1に近づくほど太くなり、0に近づくほど細くなる。
fillShadowGradientFromOpacity
バーのの線形グラデーションにおける最初の色（一番上からまんなかくらいまで）の不透明度をnumberで定義する。0を指定すると無色透明になり、1を指定するとはっきりと色が表示される。
fillShadowGradientToOpacity
バーのの線形グラデーションにおける2番目の色（真ん中くらいから一番下まで）の不透明度をnumberで定義する。0を指定すると無色透明になり、1を指定するとはっきりと色が表示される。
decimalPlaces
縦軸の値を、小数点第何位まで表示するかをnumberで指定する。1を指定すると小数点第１位まで表示する。0を指定すると小数点以降を表示しない。
propsForBackgroundLines
背景に表示されている線のスタイルを指定する。react-native-svgのLineコンポーネントに指定するプロパティと同じ内容を指定できる。
https://github.com/react-native-svg/react-native-svg#line
strokeDasharray
破線に表示される線の間隔をnumberで指定する。0を指定すると破線ではなく直線を表現できる。
SVGのプロパティを理解してアニメーションさせてみよう | 株式会社LIG(リグ)｜コンサルティング・システム開発・Web制作
stroke
破線の色をstringで16進数表記で指定できる。
strokeWidth
破線の幅をnumberで指定できる。
propsForHorizontalLabels
一番左に表示されるラベルのスタイルを設定できる。react-native-svgのTextコンポーネントに設定できるプロパティの値と同じ値を指定できる。
https://github.com/react-native-svg/react-native-svg#text
stroke
テキストの色をstringで16進数表記で指定できる。
fontWeight
フォントの幅をstringで指定できる。lighterやboldなどを指定できる。
fontSize
フォントのサイズをnumbderで指定できる。
propsForVerticalLabels
一番下に表示されるラベルのスタイルを設定できる。react-native-svgのTextコンポーネントに設定できるプロパティの値と同じ値を指定できる。
https://github.com/react-native-svg/react-native-svg#text
stroke
テキストの色をstringで16進数表記で指定できる。
fontWeight
フォントの幅をstringで指定できる。lighterやboldなどを指定できる。
fontSize
フォントのサイズをnumbderで指定できる。
verticalLabelRotation
一番下に表示されているラベルの角度をnumbderで指定できる。正の値を指定すると右に回転する。負の値を指定すると左に回転する。
showBarTops
バーの一番上に線を表示するかどうかをbooleanで指定する。
fromZero
表示するチャートの最小値を0にするかどうかをbooleanで指定する。
showValuesOnTopOfBars
バーの一番上にそのバーの値を表示するかどうかをbooleanで指定する。
withVerticalLabels
一番下に表示されているラベルを表示するかどうかをbooleanで指定する。
withHorizontalLabels
一番左に表示されているラベルを表示するかどうかをbooleanで指定する。