[Flutter]縦棒&横棒グラフ(チャート)

へっぽこプログラマーがFlutterで縦棒グラフと横棒グラフを作成してみました。コピペで使えるコードはこちら。

Flutterグラフ完成画像

Flutterコピペで使えるグラフ

縦棒グラフ

コードをコピペ

import ‘package:flutter/material.dart’;
import ‘dart:math’;
import ‘package:charts_flutter/flutter.dart’ as charts;

void main() {
runApp(new MaterialApp(
home: new ChartsDemo(),
));
}

class ChartsDemo extends StatefulWidget {
ChartsDemo() : super();

final String title = “Charts Demo”;
@override
_ChartsDemoState createState() => _ChartsDemoState();
}

class _ChartsDemoState extends State<ChartsDemo> {
List<charts.Series> seriesList;

static List<charts.Series<Sales, String>> _createRandomData() {
final random = Random();

final desktopSalesData = [
Sales(‘2015’, random.nextInt(100)),
Sales(‘2016’, random.nextInt(100)),
Sales(‘2017’, random.nextInt(100)),
Sales(‘2018’, random.nextInt(100)),
Sales(‘2019’, random.nextInt(100)),
];

final tabletSalesData = [
Sales(‘2015’, random.nextInt(100)),
Sales(‘2016’, random.nextInt(100)),
Sales(‘2017’, random.nextInt(100)),
Sales(‘2018’, random.nextInt(100)),
Sales(‘2019’, random.nextInt(100)),
];

final mobileSalesData = [
Sales(‘2015’, random.nextInt(100)),
Sales(‘2016’, random.nextInt(100)),
Sales(‘2017’, random.nextInt(100)),
Sales(‘2018’, random.nextInt(100)),
Sales(‘2019’, random.nextInt(100)),
];

return [
charts.Series<Sales, String>(
id: ‘Sales’,
domainFn: (Sales sales, _) => sales.year,
measureFn: (Sales sales, _) => sales.sales,
data: desktopSalesData,
fillColorFn: (Sales sales, _) {
return charts.MaterialPalette.blue.shadeDefault;
},
),
charts.Series<Sales, String>(
id: ‘Sales’,
domainFn: (Sales sales, _) => sales.year,
measureFn: (Sales sales, _) => sales.sales,
data: tabletSalesData,
fillColorFn: (Sales sales, _) {
return charts.MaterialPalette.green.shadeDefault;
},
),
charts.Series<Sales, String>(
id: ‘Sales’,
domainFn: (Sales sales, _) => sales.year,
measureFn: (Sales sales, _) => sales.sales,
data: mobileSalesData,
fillColorFn: (Sales sales, _) {
return charts.MaterialPalette.teal.shadeDefault;
},
)
];
}

barChart() {
return charts.BarChart(
seriesList,
animate: true,
vertical: true,

);
}

@override
void initState() {
super.initState();
seriesList = _createRandomData();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
height: 400,
padding: EdgeInsets.all(20),
child: Card(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 20),
child: Text(“test”),
),

Expanded(
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: barChart(),
)

)

]
),
),
),
),
);
}
}

class Sales {
final String year;
final int sales;

Sales(this.year, this.sales);
}

横棒グラフ

上記の縦棒グラフのコードの中の「vertical:true」を「vertical:false」に変更するだけ♪

barChart() {
return charts.BarChart(
seriesList,
animate: true,
vertical: false,

);
}

Flutterグラフ応用編

さらに、棒グラフの応用編です。

3つのデータを一つのバーにまとめるグラフ

何ていうグラフか正式名称がわからないですが、上記の3つのデータを一つのバーにまとめて表示することもできます。

これも、[barChart()]内に1行追加しただけ。

barChart() {
return charts.BarChart(
seriesList,
animate: false,
vertical: true,
barGroupingType: charts.BarGroupingType.stacked,

);
}

 

 

 

34歳から始めるオンライン学習

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

関連記事

[Dialogflow]ダイアログフローでハローワールド

[Python]JupyterLabの使い方

[Flutter]実機でデバッグしてみる(Android編)

[Dialogflow]JSでダイアログフローを動かしてみる

[Shopify]モーダル作りたいけどJS動作しない

[Flutter]Providerを使ってみる