charts_flutter
dependencies:
flutter:
sdk: flutter
charts_flutter: "^0.11.0"
Flutterで各種グラフを描画できるパッケージ。
便利なんだけど情報が少なくて目的の処理をするのに調べるのが面倒だったので備忘録。
コードにコメントでメモ
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(),
),
),
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,
desiredTickCount: 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,
),
renderSpec: charts.GridlineRendererSpec(
labelStyle: charts.TextStyleSpec(
fontSize: (fontSize).round(),
color: charts.MaterialPalette.white,
),
lineStyle: charts.LineStyleSpec(
color: charts.ColorUtil.fromDartColor(Colors.grey)
),
),
),
),
),