【Flutter】LineChart|fl_chartで折れ線グラフを生成

今回はLineChartの基本的な使い方を紹介します。

LineChartを使えば簡単に折れ線グラフを生成できます。LineChartfl_chartパッケージを導入して使用できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|fl_chartの導入

flutter pub add fl_chart
import 'package:fl_chart/fl_chart.dart';

fl_chartを導入します。

LineChartの使い方

LineChart(
  LineChartData(
    minX: 0,
    maxX: 6,
    minY: 0,
    maxY: 20,
    lineBarsData: [
      LineChartBarData(
        spots: [
          FlSpot(0, 10),
          FlSpot(1, 6),
          FlSpot(2, 16),
          FlSpot(3, 7),
          FlSpot(4, 12),
          FlSpot(5, 8),
          FlSpot(6, 10),
        ],
      )
    ],
  ),
),

上記コードがLineChartの基本形です。

LineChartLineChartDataを渡し折れ線グラフのデータやデザインを指定します。

lineBarsDataList<LineChartBarData>を渡しspotsで折れ線グラフのデータをFlSpotでリストに追加します。

サンプルコード

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: SafeArea(
          child: LineChart(
            LineChartData(
              minX: 0,
              maxX: 6,
              minY: 0,
              maxY: 20,
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    FlSpot(0, 10),
                    FlSpot(1, 6),
                    FlSpot(2, 16),
                    FlSpot(3, 7),
                    FlSpot(4, 12),
                    FlSpot(5, 8),
                    FlSpot(6, 10),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次