【Flutter】图表显示charts_flutter折线图/柱状图/饼状图等

原创 已于 2022-06-13 19:50:59 修改 · 2.1w 阅读 · 41 ·
CC 4.0 BY-SA版权
本文为博主原创文章，未经博主允许不得转载。
文章标签：

#flutter #安卓 #ios #android #dart

于 2020-08-26 16:37:31 首次发布
本文详细介绍如何使用Flutter的charts_flutter库绘制各种图表，包括折线图、柱状图和饼状图。涵盖图表动画、自定义颜色、虚线、多条线、区域填充等高级特性，以及左右滑动、多组数据展示、文本显示等实用技巧。

文章目录


使用第三方charts_flutter：https://pub.dev/packages/charts_flutter

  • Google出品，没有文档（可以在GitHub代码里的issues查找问题）
  • 支持动画
  • 支持左右滑动
  • 支持自定义颜色

折线图

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class ChartTestPage extends StatelessWidget {
  const ChartTestPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("chart_flutter")),
      body: Column(children: [Container(height: 240, child: _simpleLine())]),
    );
  }

  Widget _simpleLine() {
    var random = Random();

    var data = [
      LinearSales(0, random.nextInt(100)),
      LinearSales(1, random.nextInt(100)),
      LinearSales(2, random.nextInt(100)),
      LinearSales(3, random.nextInt(100)),
    ];

    var seriesList = [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: data,
      )
    ];

    return charts.LineChart(seriesList, animate: true);
  }
}

class LinearSales {
  final int year;
  final int sales;

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

在这里插入图片描述

折线图-添加圆点/区域LineRendererConfig
    return charts.LineChart(seriesList,
        animate: true,
        defaultRenderer:
            charts.LineRendererConfig(
            // 圆点大小
            radiusPx: 5.0,
            stacked: false,
            // 线的宽度
            strokeWidthPx: 2.0,
            // 是否显示线
            includeLine: true,
            // 是否显示圆点
            includePoints: true,
            // 是否显示包含区域
            includeArea: true,
            // 区域颜色透明度 0.0-1.0
            areaOpacity: 0.2 ,
            ));

在这里插入图片描述

折线图-虚线dashPatternFn
    var seriesList = [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data,
      )
    ];

在这里插入图片描述

折线图-自定义颜色charts.ColorUtil.fromDartColor(Color(0xFFE41E31))
    var seriesList = [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFFE41E31)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data,
      )
    ];
折线图-多条线
    var seriesList = [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFFE41E31)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data1,
      ),
      charts.Series<LinearSales, int>(
        id: 'User',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFF13A331)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        // dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data2,
      ),
      charts.Series<LinearSales, int>(
        id: 'Dart',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFF6300A1)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        // dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data3,
      )
    ];

在这里插入图片描述

折线图-针对单个线特殊处理customSeriesRenderers
    var seriesList = [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFFE41E31)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data1,
      ),
      charts.Series<LinearSales, int>(
        id: 'User',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFF13A331)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        // dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data2,
      ),
      charts.Series<LinearSales, int>(
        id: 'Dart',
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(Color(0xFF6300A1)),
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        // dashPatternFn: (_, __) => [8, 2, 4, 2],
        data: data3,
      )..setAttribute(charts.rendererIdKey, 'customArea'),
    ];

    return charts.LineChart(seriesList, animate: true, customSeriesRenderers: [
      charts.LineRendererConfig(
        // RendererId
        customRendererId: 'customArea',

        // 圆点大小
        radiusPx: 5.0,
        stacked: false,
        // 线的宽度
        strokeWidthPx: 2.0,
        // 是否显示线
        includeLine: true,
        // 是否显示圆点
        includePoints: true,
        // 是否显示包含区域
        includeArea: true,
        // 区域颜色透明度 0.0-1.0
        areaOpacity: 0.2,
      ),
    ]);

在这里插入图片描述

柱状图

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class ChartTestPage extends StatelessWidget {
  const ChartTestPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("chart_flutter")),
      body: Column(children: [Container(height: 240, child: _simpleBar())]),
    );
  }

  Widget _simpleBar() {
    var random = Random();

    var data = [
      OrdinalSales('2014', random.nextInt(100)),
      OrdinalSales('2015', random.nextInt(100)),
      OrdinalSales('2016', random.nextInt(100)),
      OrdinalSales('2017', random.nextInt(100)),
    ];
  
    var seriesList = [
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];

    return charts.BarChart(
      seriesList,
      animate: true,
    );
  }
}

class OrdinalSales {
  final String year;
  final int sales;

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

在这里插入图片描述

柱状图-左右滑动
    return charts.BarChart(
      seriesList,
      animate: true,
      behaviors: [
        charts.SlidingViewport(),
        charts.PanAndZoomBehavior(),
      ],
      domainAxis: new charts.OrdinalAxisSpec(
          viewport: new charts.OrdinalViewport('2010', 6)),
    );

在这里插入图片描述

柱状图-多组横向展示
    var seriesList = [
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data1,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data2,
      )
    ];

在这里插入图片描述

柱状图-多组上下展示barGroupingType
    return charts.BarChart(
      seriesList,
      animate: true,
      barGroupingType: charts.BarGroupingType.stacked,
      behaviors: [
        charts.SlidingViewport(),
        charts.PanAndZoomBehavior(),
      ],
      domainAxis: new charts.OrdinalAxisSpec(
          viewport: new charts.OrdinalViewport('2010', 6)),
    );

在这里插入图片描述

柱状图-横向展示vertical
    return charts.BarChart(
      seriesList,
      animate: true,
      barGroupingType: charts.BarGroupingType.stacked,
      vertical: false,
    );

在这里插入图片描述

柱状图-柱头文本显示
    return charts.BarChart(
      seriesList,
      animate: true,
      barGroupingType: charts.BarGroupingType.stacked,
      barRendererDecorator: charts.BarLabelDecorator<String>(),
    );

在这里插入图片描述

饼状图

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class ChartTestPage extends StatelessWidget {
  const ChartTestPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("chart_flutter")),
      body: Column(children: [
        Container(height: 300, child: _simplePie()),
      ]),
    );
  }

  Widget _simplePie() {
    var random = Random();

    var data = [
      PieSales(0, random.nextInt(100)),
      PieSales(1, random.nextInt(100)),
      PieSales(2, random.nextInt(100)),
      PieSales(3, random.nextInt(100)),
    ];

    var seriesList = [
      charts.Series<PieSales, int>(
        id: 'Sales',
        domainFn: (PieSales sales, _) => sales.year,
        measureFn: (PieSales sales, _) => sales.sales,
        data: data,
      )
    ];

    return charts.PieChart(seriesList, animate: true);
  }
}

class PieSales {
  final int year;
  final int sales;

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

在这里插入图片描述

饼状图-自定义颜色
var data = [
      PieSales(0, random.nextInt(100), charts.ColorUtil.fromDartColor(Color(0xFF126610))),
      PieSales(1, random.nextInt(100), charts.ColorUtil.fromDartColor(Color(0xFF522210))),
      PieSales(2, random.nextInt(100), charts.ColorUtil.fromDartColor(Color(0xFF929910))),
      PieSales(3, random.nextInt(100), charts.ColorUtil.fromDartColor(Color(0xFFD26699))),
    ];

class PieSales {
  final int year;
  final int sales;
  final charts.Color color;

  PieSales(this.year, this.sales, this.color);
}

在这里插入图片描述

饼状图-文本显示
    var seriesList = [
      charts.Series<PieSales, int>(
        id: 'Sales',
        domainFn: (PieSales sales, _) => sales.year,
        measureFn: (PieSales sales, _) => sales.sales,
        colorFn: (PieSales sales, _) => sales.color,
        data: data,
        labelAccessorFn: (PieSales row, _) => '${row.year}: ${row.sales}',
      )
    ];

    return charts.PieChart(seriesList,
        animate: true,
        defaultRenderer: new charts.ArcRendererConfig(arcRendererDecorators: [
          new charts.ArcLabelDecorator(
              labelPosition: charts.ArcLabelPosition.outside)
        ]));

在这里插入图片描述

饼状图-空心显示
    return charts.PieChart(seriesList,
        animate: true,
        defaultRenderer: new charts.ArcRendererConfig(
          arcWidth: 60,
          arcRendererDecorators: [
          new charts.ArcLabelDecorator(
              labelPosition: charts.ArcLabelPosition.outside)
        ]));

在这里插入图片描述

跟我学flutter：Flutter雷达图表（一）如何使用kg_charts
s297165331的专栏
04-21 1865
本节主要讲如何使用kg_charts中的雷达图表，来绘制一个雷达图，下一章节则会对如何绘制一个可点击雷达图表进行详细说明。 最近我在开发有关雷达图表的的业务，但的确在线上找不到可以快速集成的雷达图表，找到一篇文章（Flutter雷达图package）但不是很好定制化我们的业务，但其中的代码有比较好的借鉴。然后我借鉴了部分代码，进行了kg_charts的开发。
QML中绘制LineSeries(折线图)
liushiyi3083862599的博客
03-20 1848
QtCharts是Qt提供的一个专门用于绘制图表的模块，它支持多种类型的图表绘制，包括折线图、饼状图、曲线图等。为了在QML中使用QtCharts，首先需要在项目的.pro文件中添加对QtCharts模块的依赖，即添加。通过修改坐标轴样式，例如字体、颜色、显示范围等，可以自定义折线图的外观。此外，还可以利用定时器动态更新图表的数据，以实现动态折线图的效果。接着，在QML文件中包含必要的头文件并声明命名空间。二.具体的使用示例，可以参考以下代码框架。在QML中绘制折线图，通常使用。接下来，我们可以通过创建。
FLChart一个强大的Flutter图表库支持折线图条形图和饼图等
08-10
FL Chart 一个强大的Flutter图表库，支持折线图、条形图和饼图等
如何用Flutter Charts打造高颜值数据可视化界面：2025最新实战指南
最新发布
gitblog_01122的博客
10-26 350
Flutter Charts是一款功能强大的Material Design图表库，专为Flutter开发者打造，支持柱状图、折线图、饼图等多种可视化形式，帮助开发者快速构建美观且交互丰富的数据图表界面。无论是移动应用还是桌面端项目，都能轻松集成并实现专业级数据展示效果。 ## ???? 为什么选择Flutter Charts？核心优势解析 Flutter Charts作为一款成熟的图表解决方案，具...
flutter图表charts_flutter 0.12.0
雨汨的博客
05-10 1885
项目中要实现环形图、饼图、柱形图、折线图，用到了charts_flutter，先看实现效果吧。项目中在使用折线图时自定义了横坐标。2、创建文件并使用，代码如下。
flutter charts_flutter图表使用
anymyna的专栏
07-18 2969
https://github.com/google/charts 效果： 线性图： // Copyright 2018 the Charts project authors. Please see the AUTHORS file // for details. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance w
Flutter-图表显示charts_flutter
热门推荐
IT技术专栏
07-31 1万+
引入插件： charts_flutter: ^0.4.0 ChartFlutterBean import 'package:charts_flutter/flutter.dart'; import 'package:myself_project/OrdinalSales%20.dart'; class ChartFlutterBean { static List<Se...
fl_chart：功能强大的Flutter图表库，当前支持折线图，条形图，饼图和散点图
02-03
`fl_chart`是一个专为Flutter开发的开源图表库，提供了丰富的图表类型，包括折线图、条形图、饼图和散点图，适合用于数据分析、数据可视化以及各种需要图表展示的应用场景。以下是对`fl_chart`库及其相关知识点的...
flutter绘制柱状图和折线图
weixin_45425105的博客
02-25 2220
老规矩，看效果图 下载依赖，导包 charts_flutter: ^0.9.0 import ‘package:charts_flutter/flutter.dart’ as charts; 上代码 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:charts_flutter/flutter.dart' as charts; void main() =>
Flutter 双纵轴柱图和折线图结合
飞跃 Ni Wo Ta
12-30 3328
SfCartesianChart class - charts library - Dart APIhttps://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev pubspec.yaml引用 syncfusi
Flutter最强大的图表库fl_chart的使用
adojayfan的博客
07-07 6622
fl_chart快速入门使用
flutter_charts:Flutter的Charts库，用Flutter用Dart编写
03-07
目录 当前版本中的新功能 当前版本0.1.8。 有关此版本中的新功能和错误修复的列表，请参见<CHANGELOG>。 如CHANGELOG中所述，两个最重要的新功能是： 使代码库Dart 2干净 添加标签的“迭代自动布局”。 标签自动布局是一系列步骤的序列，例如跳过一些标签，倾斜标签或减少标签字体，这些标签可以很好地，可读性地使标签“契合”，而不会溢出或彼此碰到。 新的“迭代自动布局”功能的图示 本节说明当越来越少的水平空间可用于显示图表时，自动布局的行为。 Flutter图表库会自动检查X标签是否重叠，然后进行基于规则的迭代重新布局，以防止标签相互碰撞。 为了说明图表的“压力”水平空间，我们逐渐在图表右侧添加了一个文本小部件，其中包含并增加了“ <”号的数量。 自动布局步骤1 假设图表上有六个标签，并且有足够的空间可水平显示标签。 结果可能如下所示： 我们可以看到所
Flutter图表库fl_chart的使用解析(二)-折线图，android开发需要什么基础
m0_64319333的博客
11-18 1573
| — | — | — | | lineBarsData | 图表要展示的线的数组，数组的每一位代表一条线。 | [] | | betweenBarsData | 填充2条图表线之间的区域 | [] | | titlesData | 坐标，可以设置四个方向的标题 | FlTitlesData（） | | axisTitleData | 标题 | FlAxisTitleData（） | | extraLinesData | 额外的水平和垂直线的图形细节 | | | lineTouchData | 触摸交互详
Flutter 图形（柱状图）左右移动(charts_flutter)
qq_15931971的博客
08-07 4403
学习flutter，想搞一下柱状图，发现Google粑粑有一个图形库charts_flutter，这个图形库也很强大，网上也有大佬写了，但我没找到可以左右滑动的，于是自己查了一下官网，做了一下，但是还是发现了一些问题，希望有大佬可以解决一下； 1、首先先把图形库引入项目中:charts_flutter: ^0.9.0 2、在界面中引用导包:import 'package:charts_flutter/flutter.dart' as charts; 3、所有代码： im...
Flutter 生成图表（fl_chart）
weixin_52911459的博客
08-09 1885
Flutter 生成折线图
Flutter实战-折线图(fl_chart)
weixin_53468073的博客
04-10 1874
fl_chart折线图
Flutter 图表组件 charts_flutter_new
会煮咖啡的猫咪
11-06 1346
Flutter 图表插件 charts_flutter_new 前言 也许你的项目中需要一个图标的插件，比如显示会员的消费情况。 你可以看下 charts_flutter_new 这个插件是否合适。 可以通过这个预览网址查看 https://google.github.io/charts/flutter/gallery.html 内容很长我只截取了小段，大家可以自己查阅。 正文 我们试着跑一个 example. 01. 添加依赖包 charts_flutter_new 首先更新 pubspec.
flutter 常用图表库
weixin_35754676的博客
12-20 1757
flutter 常用图表库包括: Flutter Charts: 一个功能强大的图表库，可以创建各种类型的图表，如条形图，折线图，饼图等。 Flutter_chart: 一个轻量级的图表库，可以创建简单的图表，如折线图，散点图等。 Flutter_sparkline: 一个小型图表库，可以创建精简的线性图表，如折线图，柱状图等。 Fl_chart: 一个高度定制的图表库，可以创建各种类型的...
Flutter —— 二：如何绘制图表charts_flutter
starcrius的博客
04-03 6440
注：笔者的Flutter是以AndroidStudio为开发工具编写的 最近做了个项目需要有折线图和饼图 因为能查找到的资料很少 实现的过程比较艰难 所以记录下来（先开个头，持续更新中） ...
charts_flutter: 0.11.0画flutter折线和柱状图混合图
05-07
### 如何在 Flutter 中使用 `charts_flutter` 实现折线图与柱状图混合的图表 要在 Flutter 中通过 `charts_flutter:0.11.0` 库实现折线图与柱状图的混合图表，可以按照以下方法操作。此过程涉及到定义数据结构、配置系列类型以及设置样式。 #### 数据准备 为了绘制混合图表，需要为每种类型的图表（折线图和柱状图）分别准备数据集。这些数据可以通过自定义对象表示，并传递给图表组件。 ```dart class ChartData { final String label; final int barValue; // 柱状图数值 final double lineValue; // 折线图数值 ChartData(this.label, this.barValue, this.lineValue); } ``` #### 创建 Series 对象 `charts_flutter` 使用 `Series` 类型来描述不同的数据序列。对于混合图表，需要分别为折线图和柱状图创建两个独立的 `Series` 对象。 ```dart List<charts.Series> _createSampleData() { final data = [ ChartData('Mon', 5, 3), ChartData('Tue', 10, 6), ChartData('Wed', 15, 9), ChartData('Thu', 20, 12), ChartData('Fri', 25, 15), ]; return [ charts.Series( id: 'Bar', domainFn: (ChartData chartData, _) => chartData.label, measureFn: (ChartData chartData, _) => chartData.barValue, data: data, fillColorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, ), charts.Series( id: 'Line', domainFn: (ChartData chartData, _) => chartData.label, measureFn: (ChartData chartData, _) => chartData.lineValue, data: data, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, )..setAttribute(charts.rendererIdKey, 'line'), // 设置渲染器 ID ]; } ``` #### 组合图表 最后一步是在 `Chart` 小部件中组合这两个 `Series`。需要注意的是，必须指定每个系列使用的渲染器类型（例如，柱状图使用默认渲染器，而折线图则需要显式声明其渲染器）。这可以通过 `customRendererSpecs` 参数完成。 ```dart Widget build(BuildContext context) { var seriesList = _createSampleData(); return Scaffold( appBar: AppBar(title: Text('Mixed Bar and Line Chart')), body: Padding( padding: const EdgeInsets.all(8.0), child: SizedBox( height: 400, child: charts.BarChart( seriesList, animate: true, customSeriesRenderers: [ charts.LineRendererConfig(customRendererId: 'line'), ], ), ), ), ); } ``` 以上代码展示了如何利用 `charts_flutter` 的灵活性将两种不同类型的图表结合起来[^1]。 --- ### 注意事项 - 确保版本兼容性：由于 `charts_flutter` 版本可能会影响 API 设计，请确认所用版本是否支持上述特性。 - 性能优化：当数据量较大时，建议启用动画缓存或其他性能增强选项以改善用户体验。 ---
评论 12
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值