Flutter开发--------数据图表处理(一)

最新推荐文章于 2025-07-07 11:58:30 发布

原创最新推荐文章于 2025-07-07 11:58:30 发布 · 5.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#数据图标处理 #flutter

Flutter 同时被 2 个专栏收录

30 篇文章

订阅专栏

Flutter基本功能介绍

18 篇文章

订阅专栏

本文分享了一款用于Flutter应用的数据图表处理插件，通过实例展示了如何使用Syncfusion_flutter_charts插件创建折线图，并提供了详细的代码示例，包括插件引入、图表配置和数据映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

现在很多的东西都和大数据结合起来，因此许许多多的app里面也要做数据图表的处理。今天博主就在这里分享一个插件，也是最近才发现的。感觉比之前分享的结合echarts好多了。

实现效果

1.折现数据图

在这里插入图片描述

实例代码分析

引入插件

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  syncfusion_flutter_charts: ^1.0.0-beta.1			//数据图表插件

具体的代码

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';



SfCartesianChart getDefaultLineChart(bool isTileView) {
  return SfCartesianChart(
    plotAreaBorderWidth: 0,
    title: ChartTitle(text: '店铺销售数据'),
    legend: Legend(
        isVisible: isTileView ? false : true,
        overflowMode: LegendItemOverflowMode.wrap),
    primaryXAxis: NumericAxis(
        edgeLabelPlacement: EdgeLabelPlacement.shift,
        interval: 5,
        majorGridLines: MajorGridLines(width: 0)),
    primaryYAxis: NumericAxis(
        labelFormat: '{value}%',
        axisLine: AxisLine(width: 0),
        majorTickLines: MajorTickLines(color: Colors.transparent)),
    series: getLineSeries(isTileView),
    tooltipBehavior: TooltipBehavior(enable: true),
  );
}

List<LineSeries<_ChartData, num>> getLineSeries(bool isTileView) {
  final List<_ChartData> chartData = <_ChartData>[
    _ChartData(2005, 21, 28),
    _ChartData(2006, 24, 44),
    _ChartData(2007, 36, 48),
    _ChartData(2008, 38, 50),
    _ChartData(2009, 54, 66),
    _ChartData(2010, 57, 78),
    _ChartData(2011, 70, 84),
    _ChartData(2012, 50, 60),
    _ChartData(2013, 88, 70),
    _ChartData(2014, 60, 40),
    _ChartData(2015, 80, 60),
    _ChartData(2016, 40, 50),
    _ChartData(2017, 20, 10),
    _ChartData(2018, 90, 100),
    _ChartData(2019, 30, 50),
  ];
  return <LineSeries<_ChartData, num>>[
    LineSeries<_ChartData, num>(
        animationDuration: 2500,
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (_ChartData sales, _) => sales.x,
        yValueMapper: (_ChartData sales, _) => sales.y,
        width: 2,
        name: 'Germany',
        markerSettings: MarkerSettings(isVisible: true)),
    LineSeries<_ChartData, num>(
        animationDuration: 2500,
        enableTooltip: true,
        dataSource: chartData,
        width: 2,
        name: 'England',
        xValueMapper: (_ChartData sales, _) => sales.x,
        yValueMapper: (_ChartData sales, _) => sales.y2,
        markerSettings: MarkerSettings(isVisible: true)),
  ];
}

class _ChartData {
  _ChartData(this.x, this.y, this.y2);
  final double x;
  final double y;
  final double y2;
}