はじめに
こんにちは！
Flutterで、棒グラフと折れ線グラフなどを組み合わせた「複合グラフ（Combination Chart）」を実装したい場面、ありますよね。
↓ こういうやつです
月ごとの売上（棒グラフ）と利益率（折れ線グラフ）を重ねて表示するなど、複数の指標をまとめて可視化できると非常に便利です。
この記事では、Flutterでグラフを実装するための代表的な3つの人気ライブラリ
- graphic
- fl_chart
- syncfusion_flutter_charts
について、それぞれの実装方法や特徴を比較・解説していきます。
ライブラリ選定の参考にしていただければ幸いです！
3つのライブラリの比較
今回は、月ごとの「売上」を棒グラフ、「利益率」を折れ線グラフで表現する、という共通のお題で各ライブラリの実装を見ていきます。
本記事で紹介するサンプルコードは、以下のリポジトリで確認できます。
https://github.com/maaaashi/flutter_combination_chart_sample
1. graphic
graphic は、文法が統一されており、直感的にグラフを構築できるのが特徴です。
実装方法
Chart ウィジェットの marks プロパティに、IntervalMark（棒グラフ）と LineMark（折れ線グラフ）をリストとして渡すだけで、シンプルに複合グラフが完成します。
Chart(
data: dummySalesData,
variables: {
'month': Variable(
accessor: (Map map) => map['month'] as String,
),
'sales': Variable(
accessor: (Map map) => map['sales'] as num,
scale: LinearScale(min: 0),
),
'profitRate': Variable(
accessor: (Map map) => map['profitRate'] as num,
scale: LinearScale(min: 0),
),
},
marks: [
// 棒グラフ
IntervalMark(
position: Varset('month') * Varset('sales'),
shape: ShapeEncode(value: RectShape()),
),
// 折れ線グラフ
LineMark(
position: Varset('month') * Varset('profitRate'),
shape: ShapeEncode(value: BasicLineShape(smooth: true)),
),
],
axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
)
特徴
-
シンプルで直感的: 異なる種類のグラフを
marksに追加していくだけで良いため、非常に分かりやすいです。 -
統一された文法: グラフの種類が変わっても記述方法が一貫しているため、学習コストが低いと言えます。
- 一方で、文法が...
2. fl_chart
fl_chart は、デザインの美しさと高いカスタマイズ性で非常に人気のあるライブラリです。
実装方法
fl_chart には、複合グラフを直接作成するための機能はありません。そのため、Stack ウィジェットを使って BarChart と LineChart を手動で重ね合わせることで実現します。
Stack(
alignment: Alignment.center,
children: [
// 奥に表示する棒グラフ
BarChart(
BarChartData(
// ... 棒グラフ用のデータと設定
),
),
// 手前に重ねる折れ線グラフ
LineChart(
LineChartData(
// ... 折れ線グラフ用のデータと設定
// 背景が透明になるように設定が必要
),
),
],
)
特徴
- 高いカスタマイズ性: デザインに徹底的にこだわりたい場合に最適です。
- 手動での調整が必要: グラフを重ねるため、左右のY軸のスケールや位置などを自分で調整する手間がかかります。自由度が高い分、実装量は少し多くなる傾向があります。
3. syncfusion_flutter_charts
syncfusion_flutter_charts は、Syncfusion社が提供する商用グレードの高機能ライブラリです（個人や小規模な組織では無料プランあり）。
実装方法
SfCartesianChart ウィジェットの series プロパティに、BarSeries と LineSeries をリストとして渡すことで複合グラフを実装します。
単位の異なるY軸も axes プロパティで簡単に追加できます。
SfCartesianChart(
primaryXAxis: CategoryAxis(),
// 利益率用のY軸を右側に追加
axes: <ChartAxis>[
NumericAxis(
name: 'profitAxis',
opposedPosition: true, // 右側に表示
title: AxisTitle(text: '利益率 (%)'),
),
],
series: <CartesianSeries<SalesData, String>>[
// 棒グラフ
BarSeries<SalesData, String>(
dataSource: salesData,
xValueMapper: (SalesData sales, _) => sales.month,
yValueMapper: (SalesData sales, _) => sales.sales,
name: '売上',
),
// 折れ線グラフ
LineSeries<SalesData, String>(
dataSource: salesData,
xValueMapper: (SalesData sales, _) => sales.month,
yValueMapper: (SalesData sales, _) => sales.profitRate,
name: '利益率',
// profitAxisという名前のY軸を利用する
yAxisName: 'profitAxis',
),
],
)
特徴
- 高機能: 複数軸のサポートなど、複雑な要件にも標準で対応しやすい設計です。
- 公式サポート: 複合グラフが公式にサポートされているため、安心して利用できます。
まとめ
3つのライブラリは、それぞれ異なる思想で複合グラフを実装します。
| ライブラリ | おすすめのケース |
|---|---|
| graphic | 手軽さ・シンプルさを重視する場合。直感的にサッと実装したい。 |
| fl_chart | デザイン・カスタマイズ性を最優先する場合。独自の見た目に作り込みたい。 |
| syncfusion_flutter_charts | 高機能・複雑な要件に対応したい場合。複数軸などを安定して使いたい。 |
どのライブラリも素晴らしいので、プロジェクトの要件やご自身の好みに合わせて、最適なものを選んでみてください！