開発

【Flutter】シンプルなチャート(グラフ)を作ってみる

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

Flutterでチャートを実装したいなと思い、Dart Packagesでライブラリを探してみたところ、charts_flutterなど良いものが見つかったのですが、仕様面の問題で断念することになり、自前で作ってみることにしました。

今回はシンプルで簡易的なチャートになりますが、こんな感じで実装することができましたという紹介をしたいと思います。

これまで記事にしてきた、図形を描写するものを使ったりボーダーラインを角丸にしたりといったものを使って作ってみました。

 

作成前にチャートの仕様を決める

デザイン

見た目は以下の通りにします。

  1. チャート枠はボーダーラインで区切る
  2. チャート枠は角丸にする(前回の記事【Flutter】Widgetに角丸の枠線をつける【BoxDecoration】を参照)
  3. 左上にタイトルを表示
  4. y軸に目盛り線を水平に引く

 

チャートの仕様

  1. チャートの表示はCustomPainterを用いる(【Flutter】CustomPainterで図形を表示させる【円、三角形、四角形】を参照)
  2. x軸は日付(String型)で3日分を表示する
  3. チャートに表示するy点は円を表示する
  4. y点数値は整数でも小数点でも表示できるようにする

 

難点

目盛り数値の算出が困難を極める

グラフの表示自体は難しくなかったのですが、問題は目盛り数値の算出です。

チャートy点数値データから、目盛りに表示する数値をどう算出するのか、すなわちyの最大値が89だった場合、yの線は90を表示したいですし、そもそもyが[60,70,80]というデータだとしたら、目盛りの間隔を10ずつにしたいといったような問題も出ますので、これらをどう解決するかがネックになりました。

ググった結果これらは、物理数学付録 グラフと目盛り間隔に記載がある式で求めることができました。

 

y点数値は整数または小数点も含まれる為、小数点データ時に目盛りの間隔に問題が生じる

y点数値に小数点のデータが含まれると目盛りの間隔が計算できない問題がありました。

これは一度小数点が含まれるデータか判断し、小数点の場合、一度整数にして算出し、目盛りの表示時に、小数点に戻す処理を行うことで解決しました。

 

完成

完成後シュミレータ起動

 

コード

MyApp.dart

chart.dart

 

さいご

目盛りの算出方法など、こちら(物理数学付録 グラフと目盛り間隔)の式がなかったら、実装できておりませんでした。感謝!

flutterを真剣に触ってまだ一週間とかで、書き方が違うなどあるかもしれませんが、面白さを感じてます。

まだ、flutterの日本語の記事など少ないので、積極的にやっていきたいと思います。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
iOSをメインに、SwiftやObjective-C言語の開発をしてます。趣味は猫と戯れる事、PHPを使ったサイト作成やAndroidの開発もしております。ちなみに名前のロッキーカナイはよく昼飯を食べる所w