ライセンスによっては有料ですが、高機能なチャートライブラリsyncfusion_flutter_chartsを試してみたので紹介します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.syncfusion.com%2Fcontent%2Fimages%2FFTControl%2FCharts%2Fchart_types_updated.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=514c9fc94ad7e04c50f9c74b6a7d3883)
料金
年間総収入が100万米ドル未満で、開発者が5人以下の企業および個人はCOMMUNITY LICENSE
で無料で使うことができます。
それ以外のライセンスTEAM LICENSE
,UNLIMITED LICENSE
の料金は、こちらに記載されています。
https://www.syncfusion.com/sales/communitylicense
Line Chartを試してみる
まずは表示してみる
これだけの実装で十分立派なチャートが表示されます。
class ChartData {
ChartData(this.date, this.y);
final DateTime date;
final num? y;
}
class _ChartState extends State<Chart> {
List<ChartData> chartData = <ChartData>[];
Widget build(BuildContext context) {
return SfCartesianChart(
primaryXAxis: DateTimeAxis(),
primaryYAxis: NumericAxis(),
series: [
LineSeries<ChartData, DateTime>(
dataSource: chartData,
color: Colors.blue,
xValueMapper: (ChartData data, _) => data.date,
yValueMapper: (ChartData data, _) => data.y,
)
],
);
}
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F107427%2F5636bae9-ed9a-e52e-f74e-db60a8c29533.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1d434c7f9ef429a780432a0c90cd056e)
Y軸のラベルを調整する
例えば1万単位でラベルを表示したい、ラベルの末尾を 万
にしたいのようなことも、NumericAxisのプロパティを使うことでできます。
return SfCartesianChart(
primaryYAxis: NumericAxis(
minimum: 90000,
maximum: 110000,
interval: 10000,
axisLabelFormatter: (AxisLabelRenderDetails axisLabelRenderArgs) {
if (axisLabelRenderArgs.value > 0) {
return ChartAxisLabel("${axisLabelRenderArgs.value ~/ 10000}万", null);
} else {
return ChartAxisLabel("0", null);
}
},
),
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F107427%2F00816b22-3796-0dfb-9fd7-1b7d4326e493.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5fa9a78241ffe5f3132c003330ed983c)
同様にX軸もDateTimeAxisを設定することで自由にラベルを設定できます。
Tooltipを表示する
TooltipBehaviorを設定することで表示できます。
return SfCartesianChart(
tooltipBehavior: TooltipBehavior(enable: true),
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F107427%2Fb8f12385-07c6-7ed0-e2ab-d5f63ba8575c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ab26959d7c968d31bee762c620725f05)
Tooltipをカスタマイズする
TooltipをカスタマイズするにはTooltipBehavior.builderを使うことで、実現できます。
return SfCartesianChart(
tooltipBehavior: TooltipBehavior(
enable: true,
builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
if (chartData.length < pointIndex) {
return const SizedBox.shrink();
}
final data = chartData[pointIndex];
final dateFormat = DateFormat('yyyy/MM/dd');
final numberFormat = NumberFormat('#,###');
return Container(
height: 55,
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Color(0xFFF7F7F7),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
dateFormat.format(data.date),
style: const TextStyle(color: Colors.black, fontSize: 12),
),
Text(
"¥${numberFormat.format(data.y)}",
style: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w700),
),
],
),
);
},
),
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F107427%2F970e745d-8c47-662f-504d-b41884f2c91c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9dc0ba41db80720ddb6305ebd0018c22)
最後に
Line Chartを例に簡単な実装を紹介しましたが、これ以外にも多様なカスタマイズを実現するための仕組みが提供されています。
数百件以上のデータを表示しても問題ないし、大量データの一部だけを表示しそのレンジを自由に操作できるようなチャートも設定できたりと十分に実践レベルの出来であると感じました。
値段が問題ないようであれば、実際のプロダクトでもぜひ利用してみたいと思います!