MENU
カテゴリー
＼気になるカテゴリーをクリック！／
【Flutter】複合グラフも簡単！syncfusion_flutter_chartsの使い方を3分で解説！
この記事にはPRを含む場合があります。
Flutterで複合グラフを表示させたい！
Flutterのsyncfusion_flutter_chartsライブラリの使い方を知りたい！
そこで、今回はFlutterでグラフ描画できるライブラリsyncfusion_flutter_chartsの基本的な使い方を解説します。
不明点などありましたらお気軽にお問い合わせ下さい。
この記事で分かること！
- syncfusion_flutter_chartsって何？
- syncfusion_flutter_chartsの使い方
フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。
あわせて読みたい
Flutterフリーランスエージェントおすすめサイト5選！徹底比較！
Flutterの仕事をフリーランスでしたい！ どこのサイトがFlutter求人が多いのか知りたい！ そこで、今回はFlutterエンジニアの求人案件探しにオススメのサービス5選をご...
目次
【Flutter】syncfusion_flutter_chartsとは？グラフ種類が多い人気ライブラリ
syncfusion_flutter_chartsはFlutter で人気のグラフ描画ライブラリです。マニュアルが分かりやすく、上の画像のようにグラフも30種類以上もあるライブラリです。AppleやIntelなど大手企業もsyncfusionのライブラリを採用してます。
syncfusion_flutter_chartsとは
Create various types of cartesian, circular and spark charts with seamless interaction, responsiveness, and smooth animation. It has a rich set of features, and it is completely customizable and extendable.
（直訳）シームレスな相互作用、応答性、スムーズなアニメーションを備えた、さまざまなタイプのデカルト チャート、円形チャート、およびスパーク チャートを作成します。豊富な機能セットがあり、完全にカスタマイズおよび拡張可能です。
引用：pub.dev「syncfusion_flutter_charts」公式サイト「syncfusion」
syncfusion_flutter_chartsは商用パッケージだが無償ライセンスもある！
syncfusion_flutter_chartsは商用パッケージなので、利用するにはSyncfusion 商用ライセンスまたは無料のSyncfusionコミュニティライセンスが必要です。
無料のライセンス対象は、年間総収益が 100 万USドル未満で、開発者が 5 人以下の企業および個人。
Who is eligible?
引用： Syncfusion コミュニティ
Companies and individuals with less than $1 million USD in annual gross revenue and 5 or fewer developers.
Note: An entity or organization may not have ever received more than $3,000,000 USD in capital from an outside source, such as private equity or venture capital, in order to be eligible for the Community License.
やきいも個人が年間収益を１億円以上も稼げることはないので、よっぽど無料ライセンスで利用できます！
無料のSynfusionコミュニティライセンス登録はこちらからできます。
【Flutter】syncfusion_flutter_chartsでグラフ描画する3つの使い方
syncfusion_flutter_chartsの以下3つの使い方を解説します。
- 折れ線グラフ
- 棒グラフ
- 複合グラフ（折れ線グラフ＋棒グラフ）
ライブラリをプロジェクトに追加する
dependencies:
syncfusion_flutter_charts: ^20.4.42使用するウィジェットをインポートする
import 'package:syncfusion_flutter_charts/charts.dart';Flutter | syncfusion_flutter_charts | 折れ線グラフ
上のデモ画面の折れ線グラフの作成方法は以下の通りです。
クリックするとサンプルコード表示されます。
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:intl/intl.dart';
void main() => runApp(StatelessDemo());
class SalesData {
SalesData(this.month, this.sales);
final String month;
final double sales;
}
class StatelessDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// グラフクリック時の動作
TooltipBehavior _tooltipBehavior;
_tooltipBehavior = TooltipBehavior(enable: true);
// データ定義
final List<SalesData> chartData = [
SalesData('2月', 60000),
SalesData('3月', 220000),
SalesData('4月', 400000),
SalesData('5月', 500000),
SalesData('6月', 800000)
];
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('syncfusion_折れ線グラフデモ'),),
body: Padding(
padding: const EdgeInsets.all(40.0),
child: SfCartesianChart(
title: ChartTitle(text: 'アプリ収益'), // タイトル
legend: Legend(isVisible: true), // 凡例の表示
tooltipBehavior: _tooltipBehavior, // グラフクリック時の動作
series: <ChartSeries>[
// Renders line chart
LineSeries<SalesData, String>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.month,
yValueMapper: (SalesData sales, _) => sales.sales,
dataLabelSettings: DataLabelSettings(isVisible: true), // データ数値の表示
name: '収益', // 凡例の名前
enableTooltip: true // グラフクリック時の動作
)
],
primaryXAxis: CategoryAxis(),
// Y軸の通過記号の表示
primaryYAxis: NumericAxis(
numberFormat: NumberFormat.simpleCurrency(locale: 'ja')),
),
),
),
);
}
}
Flutter | syncfusion_flutter_charts | 棒グラフ
上のデモ画面の棒グラフの作成方法は以下の通りです。
クリックするとサンプルコード表示されます。
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
return runApp(_ChartApp());
}
class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
_MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<_MyHomePage> {
late List<_ChartData> data;
late TooltipBehavior _tooltip;
@override
void initState() {
data = [
_ChartData('2月', 11),
_ChartData('3月', 17),
_ChartData('4月', 10),
_ChartData('5月', 6),
_ChartData('6月', 5)
];
_tooltip = TooltipBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion 棒グラフデモ'),
),
body: Padding(
padding: const EdgeInsets.all(40.0),
child: SfCartesianChart(
title: ChartTitle(text: 'アプリ公開数'), // タイトル
legend: Legend(isVisible: true), // 凡例の表示
primaryXAxis: CategoryAxis(),
primaryYAxis: NumericAxis(minimum: 0, maximum: 20, interval: 5),
tooltipBehavior: _tooltip,
series: <ChartSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>(
dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
name: 'アプリ数',
borderRadius: BorderRadius.all(Radius.circular(15)),
width: 0.2,
color: Color.fromRGBO(8, 142, 255, 1),
dataLabelSettings: DataLabelSettings(isVisible: true), // データ数値の表示
)
]),
));
}
}
class _ChartData {
_ChartData(this.x, this.y);
final String x;
final double y;
}Flutter | syncfusion_flutter_charts | 複合グラフ（折れ線グラフ＋棒グラフ）
上のデモ画面の複合グラフの作成方法は以下の通りです。
クリックするとサンプルコード表示されます。
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:intl/intl.dart';
void main() {
return runApp(_ChartApp());
}
class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
_MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<_MyHomePage> {
late List<_ChartData> data;
late TooltipBehavior _tooltip;
@override
void initState() {
data = [
_ChartData('2月', 11, 40),
_ChartData('3月', 17, 60),
_ChartData('4月', 10, 74),
_ChartData('5月', 6, 30),
_ChartData('6月', 5, 73)
];
_tooltip = TooltipBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion複合グラフデモ'),
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: SfCartesianChart(
title: ChartTitle(text: 'アプリ収益分析'), // タイトル
legend: Legend(isVisible: true), // 凡例の表示
primaryXAxis: CategoryAxis(),
primaryYAxis: NumericAxis(minimum: 0, maximum: 100, interval: 10),
tooltipBehavior: _tooltip,
series: <ChartSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>(
dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
name: 'アプリ公開数',
color: Color.fromRGBO(8, 142, 255, 1),
width: 0.2,
dataLabelSettings: DataLabelSettings(isVisible: true), // データ数値の表示
),
LineSeries<_ChartData, String>(
dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y1,
name: '収益（万円）',
color: Color.fromRGBO(238, 11, 72, 1.0))
],
),
));
}
}
class _ChartData {
_ChartData(this.x, this.y, this.y1);
final String x;
final double y;
final double y1;
}まとめ：syncfusion_flutter_chartsは複合グラフ描画が簡単にできて便利！
今回はFlutterでグラフの描画ができるライブラリfl_chartの基本的な使い方を解説しました。
グラフ描画できるライブラリは１つか２つ押さえおくと便利です！個人アプリ開発時に表現の幅が広がるので、ぜひ押さえておきましょう！
Flutterエンジニアになるには？
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る
あわせて読みたい
Flutter学習ロードマップ！０から初心者向けに完全解説！【2024年最新】
Flutterエンジニアになりたい Flutterエンジニアになるための学習ロードマップを知りたい これから、Flutterエンジニアを目指すならどうやったらなれるのか進め方は知っ...
Flutter をスクールで学ぶ
あわせて読みたい
Flutterプログラミングスクールおすすめ4社！36社の調査結果【完全公開】
Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ プログラミング初心者は疑問やエラ...
Flutterの副業を探す
あわせて読みたい
Flutterの副業案件おすすめのサイト3選！【週2・リモートあり】
Flutterで副業を始めたい！どこのサイトがおすすめか知りたい！ 週2,3日でスキルアップが望めるようなFlutterの案件をやりたい！どこのエージェントが良いかな？ 初めて...
おまけ：Flutter入門の完全ガイド
あわせて読みたい
【Flutter入門ガイド2024】知識ゼロから使い方・全体像が分かる！
Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
- ローカルデータベース（SQLite）
- グラフ①（fl_chart）
- グラフ②（syncfusion_flutter_charts）
- カレンダーから日付取得①（syncfusion_flutter_datepicker）
- カレンダーから日付取得②（month_picker_dialog_2）
コメント