[Flutter] fl_chartを使ってグラフを作成したときの覚書

flutterでアプリを作成する際にfl_chartを使ってグラフを作成する必要が出たが、
色々と分からなかった箇所が多かったので何がしたかったときにどうしたのかって形で
自分用のメモとして記事を書いておく

今回は折線グラフで利用したので、以下全て折線グラフです。

X軸を日付で表示したい

FlSpotのx値にdate.millisecondsSinceEpoch.toDouble()を設定する。
このときに基準となるdateは00:00:00などの日付を使っておくと後の処理が楽。
重要なのは

• SideTitles(interval:)に1日単位なら60 * 60 * 24 * 1000ミリ秒を指定すること
• baselineXに最小値を正しく設定すること
• minX、maxXを正しく設定すること
  この辺りが抜けていると、想定した間隔で日付のラベルが表示されないことがあります。

Y軸に単位を表示したい

• getTitlesWidgetで、valueが最大値の場合には表示するラベルを単位表示変更するなど

2軸で折線グラフを表示したい

• 私が調べた限りだと2軸で折線グラフを描画するようなオプションは見つかりませんでした。
• なので、Stackでグラフを2つ重ねた。上のグラフではrightTitlesをblankに、下のグラフではleftTitlesをblankにしてbottomTitlesの設定やminX、maxX、baselineXなどの指定を揃える。
• ポップアップ表示はカスタマイズする。

基準線を表示したい

• extraLinesDataを設定することで、グラフとは別軸に線を引くことができます。
• 水平線の場合、HorizontalLineLabelをカスタマイズすることで水平線状に文字表示も可能
• 破線にしたい場合は、dashArray: [4, 2]などを表示すると破線が描けます。[4, 3, 2]など色々設定してみて自分の理想の破線を描こう。

ポップアップをカスタマイズしたい

数値をタップしたときのポップアップ周りをカスタマイズするときはlineTouchDataを変更します。

• getTouchLineEndでdouble.infinityを指定すると線がグラフの上下端まで届きます。
• getTouchedSpotIndicatorを変更することで、線のスタイルを変更できます。
• touchTooltipDataを変更することでポップアップが変更できます。

getTooltipItems: (lineBarSpots) {
          return lineBarSpots.map((spot) {
	      return LineTooltipItem();
          }).toList();