charts_flutterで右側に別系統の目盛り表示

概要

棒グラフと折れ線グラフをオーバーラップしたグラフの作り方はわかったのだけど

こういうグラフって棒グラフと折れ線グラフの単位は違うはずなのに同じメモリで記述はおかしいよね？

というわけで右側に別単位のメモリを表示する方法を調べました。

こんな感じで

graph.dart

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class TempRainChart extends StatelessWidget {
  final List<charts.Series<dynamic, DateTime>> seriesList;
  final bool animate;

  // ignore: use_key_in_widget_constructors
  const TempRainChart(this.seriesList, {this.animate = false});

  factory TempRainChart.withSampleData() {
    return TempRainChart(
      _createSampleData(),
      animate: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      defaultRenderer: charts.LineRendererConfig(),
      customSeriesRenderers: [
        charts.BarRendererConfig(
          customRendererId: 'rainfall',
        ),
      ],
    );
  }

  static List<charts.Series<dynamic, DateTime>> _createSampleData() {

    //2020年の東京の平均気温と降水量
    final tempData = [
      TempRains(DateTime(2020, 1), 5.2),
      TempRains(DateTime(2020, 2), 5.7),
      TempRains(DateTime(2020, 3), 8.7),
      TempRains(DateTime(2020, 4), 13.9),
      TempRains(DateTime(2020, 5), 18.2),
      TempRains(DateTime(2020, 6), 21.4),
      TempRains(DateTime(2020, 7), 25.0),
      TempRains(DateTime(2020, 8), 26.4),
      TempRains(DateTime(2020, 9), 22.8),
      TempRains(DateTime(2020, 10), 17.5),
      TempRains(DateTime(2020, 11), 12.1),
      TempRains(DateTime(2020, 12), 7.6),
    ];
    final rainData = [
      TempRains(DateTime(2020, 1), 52.3),
      TempRains(DateTime(2020, 2), 56.1),
      TempRains(DateTime(2020, 3), 117.5),
      TempRains(DateTime(2020, 4), 124.5),
      TempRains(DateTime(2020, 5), 137.8),
      TempRains(DateTime(2020, 6), 167.7),
      TempRains(DateTime(2020, 7), 153.5),
      TempRains(DateTime(2020, 8), 168.2),
      TempRains(DateTime(2020, 9), 209.9),
      TempRains(DateTime(2020, 10), 197.8),
      TempRains(DateTime(2020, 11), 92.5),
      TempRains(DateTime(2020, 12), 51.0),
    ];

    return [
      charts.Series<TempRains, DateTime>(
        id: 'Temp',
        colorFn: (datum, index) => charts.MaterialPalette.yellow.shadeDefault,
        domainFn: (TempRains temp, _) => temp.day,
        measureFn: (TempRains temp, _) => temp.val,
        data: tempData,
      )..setAttribute(
          charts.measureAxisIdKey,
          charts.Axis.secondaryMeasureAxisId,
        ),
      charts.Series<TempRains, DateTime>(
        id: 'Rain',
        colorFn: (datum, index) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (datum, index) => datum.day,
        measureFn: (datum, index) => datum.val,
        data: rainData,
      )..setAttribute(
          charts.rendererIdKey,
          'rainfall',
        ),
    ];
  }
}

class TempRains {
  final DateTime day;
  final double val;
  TempRains(this.day, this.val);
}

動かしてみる

まぁOKですね。

解説

      charts.Series<TempRains, DateTime>(
        id: 'Temp',
        colorFn: (datum, index) => charts.MaterialPalette.yellow.shadeDefault,
        domainFn: (TempRains temp, _) => temp.day,
        measureFn: (TempRains temp, _) => temp.val,
        data: tempData,
      )..setAttribute(
          charts.measureAxisIdKey,
          charts.Axis.secondaryMeasureAxisId,
        ),
      charts.Series<TempRains, DateTime>(
        id: 'Rain',
        colorFn: (datum, index) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (datum, index) => datum.day,
        measureFn: (datum, index) => datum.val,
        data: rainData,
      )..setAttribute(
          charts.rendererIdKey,
          'rainfall',
        ),

の setAttribute で
charts.measureAxisIdKey, charts.Axis.secondaryMeasureAxisId,
を設定することで右軸にメモリを表示できるらしい。

オーバーラップさせて表示するグラフには customSeriesRenderers で指定する renderIdKey を設定する必要があるので
オーバーラップさせるグラフのメモリを右にしたい場合は、renderIdKey と measureAxisIdKey を同時に設定する必要がありそうなのだけど
２つの属性を設定する方法が分からなかったので、
ベースになるグラフを右側目盛して、追加グラフを左側目盛りにした...

課題

追加データ側を右側目盛りにする方法
グラフ種別のラベル表示する方法
目盛り表示のmin/maxの設定（温度グラフをもう少し上部の狭い範囲に表示したい）
色変更、colorFnで単純に Colors.red とかの設定ができなかった？

感想

まだまだ分からないことが多い感じながら
とうとう年末になってしまって反省....