Flutterでグラフ charts_flutter

charts_flutter

dependencies:
  flutter:
    sdk: flutter
  charts_flutter: "^0.11.0"

Flutterで各種グラフを描画できるパッケージ。
便利なんだけど情報が少なくて目的の処理をするのに調べるのが面倒だったので備忘録。



コードにコメントでメモ

//double fontSize;

//class GraphData {
//  int hoge = 0;
//  int fuga = 0;
//  GraphData(this.hoge, this.fuga);
//}

List<charts.Series<GraphData, int>> _serieseData = [];

_serieseData.add(
  charts.Series<GraphData, int>(
    id: "凡例",
    data: _graphData,
    domainFn: (GraphData data, _) => data.hoge,
    measureFn: (GraphData data, _) => data.fuga,
    colorFn: (GraphData data, _) => charts.ColorUtil.fromDartColor(Colors.blue),//線の色
  ),
);

Container(
  padding: EdgeInsets.all(10),
  width: 600,
  height: 400,
  child: charts.LineChart(
    _serieseData,
    animate: true,
    animationDuration: Duration(milliseconds: 300), //アニメーションの時間
    behaviors: [
      charts.SeriesLegend(
        position: charts.BehaviorPosition.top,//凡例の表示位置
        desiredMaxColumns: 1,//凡例の並べ方の行数
        entryTextStyle: charts.TextStyleSpec(//凡例のテキストスタイル
          color: charts.ColorUtil.fromDartColor(Colors.white),
          fontSize: (fontSize).toInt(),
        ),
      ),
      charts.ChartTitle(
        '横軸タイトル',
        behaviorPosition: charts.BehaviorPosition.bottom,//横軸なので下に表示
        titleOutsideJustification: charts.OutsideJustification.middleDrawArea,
        titleStyleSpec: charts.TextStyleSpec(//テキストスタイル
          color: charts.ColorUtil.fromDartColor(Colors.white),//色は変換して使う
          fontSize: (fontSize).toInt(),//int型を要求される
        ),
      ),
      charts.ChartTitle(
        '縦軸タイトル',
        behaviorPosition: charts.BehaviorPosition.start,//縦軸なので左に表示
        titleOutsideJustification: charts.OutsideJustification.middleDrawArea,
        titleStyleSpec: charts.TextStyleSpec(//テキストスタイル
          color: charts.ColorUtil.fromDartColor(Colors.white),
          fontSize: (fontSize).toInt(),
        ),
      ),
    ],
    domainAxis: charts.NumericAxisSpec(//横軸
      viewport: charts.NumericExtents(10, 100.0),　//横軸の表示範囲を明示する場合
      tickProviderSpec: charts.BasicNumericTickProviderSpec(
        zeroBound: false, //falseにすると軸を0から開始せずに、存在するデータの値の範囲を表示する
        desiredTickCount: 10,//目盛りを何分割するか desiredなので必ずしもこの値にはならないが考慮してくれる
        // desiredMinTickCount: 5,//分割の範囲を指定する場合
        // desiredMaxTickCount: 10,
      ),
      renderSpec: charts.GridlineRendererSpec(
        labelStyle: charts.TextStyleSpec(//目盛りのテキストスタイル
          fontSize: (fontSize).round(),
          color: charts.MaterialPalette.white,
        ),
        lineStyle: charts.LineStyleSpec(//目盛り線の設定
          color: charts.ColorUtil.fromDartColor(Colors.grey),
          dashPattern: [4, 4],//点線（実線と隙間のサイズを指定する）
        ),
      ),
    ),
    primaryMeasureAxis: charts.NumericAxisSpec(//縦軸
      tickProviderSpec: charts.BasicNumericTickProviderSpec(
        zeroBound: true,
        desiredTickCount: 10,
        // desiredMinTickCount: 5,
        // desiredMaxTickCount: 10,
      ),
      renderSpec: charts.GridlineRendererSpec(
        labelStyle: charts.TextStyleSpec(
          fontSize: (fontSize).round(),
          color: charts.MaterialPalette.white,
        ),
        lineStyle: charts.LineStyleSpec(
            color: charts.ColorUtil.fromDartColor(Colors.grey)
            //dashPattern: [4, 4],
            ),
      ),
    ),
  ),
),