Flutter图表绘制插件syncfusion_flutter_charts的使用

Flutter Charts library

Syncfusion Flutter Charts 包是一个用Dart原生编写的用于创建美丽、动画和高性能图表的数据可视化库，用于构建高质量的移动应用程序用户界面。

概述

该包提供了各种类型的笛卡尔图、圆形图和火花线图，具有无缝交互、响应性和平滑动画。它具有丰富的功能，并且完全可定制和可扩展。

此 syncfusion_flutter_charts 包含以下小部件：

• SfCartesianChart
• SfCircularChart
• SfPyramidChart
• SfFunnelChart
• SfSparkLineChart
• SfSparkAreaChart
• SfSparkBarChart
• SfSparkWinLossChart

免责声明： 这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或 免费 Syncfusion® 社区许可证。更多详情，请查看 LICENSE 文件。

目录

• 图表功能
• 火花图功能
• 获取演示应用程序
• 其他有用链接
• 安装
• 图表入门
  • 将图表添加到小部件树中
  • 绑定数据源
  • 添加图表元素
• 火花图入门
  • 将火花图添加到小部件树中
  • 绑定火花图数据源
  • 添加火花图元素
• 支持与反馈
• 关于 Syncfusion®

图表功能

图表类型

提供30多种图表类型的渲染功能，如折线图、样条图、柱状图、条形图等。

坐标轴类型

支持数值轴、类别轴、日期时间轴、日期时间类别轴和对数轴。

用户交互

包括缩放和平移、十字光标、跟踪球、回调、选择、提示和自动滚动等功能。

图例

显示有关图表系列的额外信息。图例还可以用于折叠系列。

动态更新

动态或延迟更新实时变化的数据，如股票价格、温度、速度等。

火花图功能

图表类型

支持渲染线形图、面积图、条形图和胜败图。

坐标轴类型

支持数值轴、类别轴和日期时间轴。

标记和数据标签

在最高点、最低点、第一个点、最后一个点和所有数据点上渲染标记和数据标签。

跟踪球

在与图表交互时显示有关数据点的额外信息。

绘制带

使用特定颜色突出显示特定的垂直范围。

实时更新

火花线图可以用于实时更新。

获取演示应用程序

探索我们Flutter小部件的全部功能，通过以下应用商店下载我们的示例浏览器应用程序，并在GitHub上查看示例代码。

其他有用链接

了解更多关于Syncfusion® Flutter图表的信息：

• Syncfusion® Flutter Charts 产品页面
• 视频教程
• 知识库
• 下载免费试用版
• 定价
• 用户指南文档
• 在线示例

安装

从 pub 安装最新版本。

图表入门

将图表添加到小部件树中

import 'package:syncfusion_flutter_charts/charts.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart()
        )
      )
  );
}

绑定数据源

import 'package:syncfusion_flutter_charts/charts.dart';

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                dataSource: <SalesData>[
                  SalesData('Jan', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 34),
                  SalesData('Apr', 32),
                  SalesData('May', 40)
                ],
                xValueMapper: (SalesData sales, _) => sales.year,
                yValueMapper: (SalesData sales, _) => sales.sales
              )
            ]
          )
        )
      )
  );
}

添加图表元素

import 'package:syncfusion_flutter_charts/charts.dart';

TooltipBehavior _tooltipBehavior;

@override
void initState(){
  _tooltipBehavior = TooltipBehavior(enable: true);
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            title: ChartTitle(text: 'Half yearly sales analysis'),
            legend: Legend(isVisible: true),
            tooltipBehavior: _tooltipBehavior,
            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                dataSource: <SalesData>[
                  SalesData('Jan', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 34),
                  SalesData('Apr', 32),
                  SalesData('May', 40)
                ],
                xValueMapper: (SalesData sales, _) => sales.year,
                yValueMapper: (SalesData sales, _) => sales.sales,
                dataLabelSettings: DataLabelSettings(isVisible: true)
              )
            ]
          )
        )
      )
  );
}

火花图入门

将火花图添加到小部件树中

import 'package:syncfusion_flutter_charts/sparkcharts.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfSparkLineChart()
        )
      )
  );
}

绑定火花图数据源

import 'package:syncfusion_flutter_charts/sparkcharts.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfSparkLineChart(
              data: <double>[
                1, 5, -6, 0, 1, -2, 7, -7, -4, -10, 13, -6, 7, 5, 11, 5, 3
              ],
            )
        )
      )
  );
}

添加火花图元素

import 'package:syncfusion_flutter_charts/sparkcharts.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfSparkLineChart(
              trackball: SparkChartTrackball(
                  activationMode: SparkChartActivationMode.tap),
              marker: SparkChartMarker(
                  displayMode: SparkChartMarkerDisplayMode.all),
              labelDisplayMode: SparkChartLabelDisplayMode.all,
              data: <double>[
                1, 5, -6, 0, 1, -2, 7, -7, -4, -10, 13, -6, 7, 5, 11, 5, 3
              ],
            )
        )
      )
  );
}

支持与反馈

• 对于任何其他问题，联系 Syncfusion® 支持团队 或通过 社区论坛 提问，并通过我们的 反馈门户 提交功能请求或错误。
• 要续订订阅，请点击 续订 或联系我们的销售团队 salessupport@syncfusion.com | 免费电话：1-888-9 DOTNET。

关于 Syncfusion® Flutter 小部件

Syncfusion® 的 Flutter 库 包含一组不断增长的UI小部件，用于创建跨平台本地移动应用程序，适用于Android、iOS、Web、macOS和Linux平台。除了图表，我们还提供流行的小部件，如 DataGrid、Calendar、Radial Gauge、PDF Viewer 和 PDF Library。

示例代码

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

void main() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      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> {
  List<_SalesData> data = [
    _SalesData('Jan', 35),
    _SalesData('Feb', 28),
    _SalesData('Mar', 34),
    _SalesData('Apr', 32),
    _SalesData('May', 40)
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter chart'),
        ),
        body: Column(children: [
          //Initialize the chart widget
          SfCartesianChart(
              primaryXAxis: CategoryAxis(),
              // Chart title
              title: ChartTitle(text: 'Half yearly sales analysis'),
              // Enable legend
              legend: Legend(isVisible: true),
              // Enable tooltip
              tooltipBehavior: TooltipBehavior(enable: true),
              series: <CartesianSeries<_SalesData, String>>[
                LineSeries<_SalesData, String>(
                    dataSource: data,
                    xValueMapper: (_SalesData sales, _) => sales.year,
                    yValueMapper: (_SalesData sales, _) => sales.sales,
                    name: 'Sales',
                    // Enable data label
                    dataLabelSettings: DataLabelSettings(isVisible: true))
              ]),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              //Initialize the spark charts widget
              child: SfSparkLineChart.custom(
                //Enable the trackball
                trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.tap),
                //Enable marker
                marker: SparkChartMarker(
                    displayMode: SparkChartMarkerDisplayMode.all),
                //Enable data label
                labelDisplayMode: SparkChartLabelDisplayMode.all,
                xValueMapper: (int index) => data[index].year,
                yValueMapper: (int index) => data[index].sales,
                dataCount: 5,
              ),
            ),
          )
        ]));
  }
}

class _SalesData {
  _SalesData(this.year, this.sales);

  final String year;
  final double sales;
}