たかぎとねこの忘備録

プログラミングに関する忘備録を自分用に残しときます。マサカリ怖い。

Nike Run Clubアプリのチャートコンポーネントぽいものを作ってみる

僕はランニングする時にNRCを愛用しています。

www.nike.com

このアプリのグラフをReact Native Chart Kitというライブラリで再現できないか試してみた。

github.com

まずはインストールから。

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の値は縦軸の値。labelsdatasets[0].dataの各要素の値は1対1で対応している。なので、要素数を合わせる必要がある。

{
  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から1numberで指定する。1に近づくほど太くなり、0に近づくほど細くなる。

fillShadowGradientFromOpacity

バーのの線形グラデーションにおける最初の色(一番上からまんなかくらいまで)の不透明度をnumberで定義する。0を指定すると無色透明になり、1を指定するとはっきりと色が表示される。

fillShadowGradientToOpacity

バーのの線形グラデーションにおける2番目の色(真ん中くらいから一番下まで)の不透明度をnumberで定義する。0を指定すると無色透明になり、1を指定するとはっきりと色が表示される。

decimalPlaces

縦軸の値を、小数点第何位まで表示するかをnumberで指定する。1を指定すると小数点第1位まで表示する。0を指定すると小数点以降を表示しない。

propsForBackgroundLines

背景に表示されている線のスタイルを指定する。react-native-svgLineコンポーネントに指定するプロパティと同じ内容を指定できる。

https://github.com/react-native-svg/react-native-svg#line

strokeDasharray

破線に表示される線の間隔をnumberで指定する。0を指定すると破線ではなく直線を表現できる。

SVGのプロパティを理解してアニメーションさせてみよう | 株式会社LIG(リグ)|コンサルティング・システム開発・Web制作

stroke

破線の色をstringで16進数表記で指定できる。

strokeWidth

破線の幅をnumberで指定できる。

propsForHorizontalLabels

一番左に表示されるラベルのスタイルを設定できる。react-native-svgTextコンポーネントに設定できるプロパティの値と同じ値を指定できる。

https://github.com/react-native-svg/react-native-svg#text

stroke

テキストの色をstringで16進数表記で指定できる。

fontWeight

フォントの幅をstringで指定できる。lighterboldなどを指定できる。

fontSize

フォントのサイズをnumbderで指定できる。

propsForVerticalLabels

一番下に表示されるラベルのスタイルを設定できる。react-native-svgTextコンポーネントに設定できるプロパティの値と同じ値を指定できる。

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で指定する。