Flutter图表绘制插件custom_syncfusion_flutter_charts的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter图表绘制插件custom_syncfusion_flutter_charts的使用

概览

Flutter Charts 包是一个用 Dart 编写的原生数据可视化库，用于创建漂亮的、动画的和高性能的图表。这些图表可以用来构建高质量的移动应用用户界面。

功能概览

图表功能

  • 图表类型 - 提供30多种图表类型，如线图、折线图、柱状图、条形图、面积图、气泡图、箱型图、散点图、阶梯线图、快速线图、区间柱状图、区间面积图、蜡烛图、最高最低图、OHLC图、直方图、阶梯面积图、折线面积图、折线范围面积图、堆积面积图、堆积条形图、堆积柱状图、堆积线图、100%堆积面积图、100%堆积条形图、100%堆积柱状图、100%堆积线图、瀑布图、饼图、甜甜圈图、径向条形图、金字塔图、漏斗图。
  • 轴类型 - 使用数值轴、类别轴、日期时间轴、日期时间类别轴和对数轴来绘制各种类型的数据。
  • 用户交互 - 包括缩放和平移、十字光标、跟踪球、回调、选择、提示框和自动滚动等功能。
  • 图例 - 显示有关图表系列的附加信息，图例也可以用于折叠系列。
  • 动态更新 - 可以动态或懒加载地更新图表，如股票价格、温度、速度等实时数据。

火柴棒图表功能

火柴棒图表（也称为微型图表）是一种轻量级图表，适合在很小的空间内展示数据趋势。它们可以快速向用户传达信息。

  • 图表类型 - 支持线图、面积图、条形图和胜负图。
  • 轴类型 - 火柴棒图表支持数值轴、类别轴和日期时间轴。
  • 标记和数据标签 - 支持在高点、低点、起点、终点和所有数据点上渲染标记和数据标签。
  • 跟踪球 - 在与图表交互时显示有关数据点的附加信息。
  • 绘图带 - 使用特定颜色突出显示特定的垂直范围。
  • 实时更新 - 火柴棒图表可以用于实时更新。

获取演示应用程序

通过安装我们的示例浏览器应用程序，可以在您的设备上探索我们 Flutter 小部件的全部功能，并在 GitHub 上查看示例代码。

其他有用的链接

安装

从 pub 安装最新版本。

图表入门

将图表添加到小部件树

将图表小部件作为任何小部件的子项添加。这里，图表小部件作为容器小部件的子项添加。

import 'package:syncfusion_flutter_charts/charts.dart';

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

注意

  • 使用 SfCartesianChart 小部件来渲染线图、折线图、面积图、柱状图、条形图、气泡图、散点图、阶梯线图和快速线图。
  • 使用 SfCircularChart 小部件来渲染饼图、甜甜圈图和径向条形图。
  • 使用 SfPyramidChart 和 SfFunnelChart 分别来渲染金字塔图和漏斗图。

绑定数据源

基于数据，初始化适当的轴类型和系列类型。在系列中映射数据源和 x 和 y 数据点字段。要渲染带有类别轴的线图，初始化适当的属性。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
        child: Container(
          child: SfCartesianChart(
            // 初始化类别轴
            primaryXAxis: CategoryAxis(),

            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                // 绑定数据源
                dataSource:  [
                  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
              )
            ]
          )
        )
      )
  );
}

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

添加图表元素

添加诸如标题、图例、数据标签和提示框等图表元素，以显示图表中绘制的数据的附加信息。

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('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()
        )
      )
  );
}

注意

  • 使用 SfSparkAreaChart、SfSparkBarChart 和 SfSparkWinLossChart 小部件分别渲染面积图、条形图和胜负图。

绑定火柴棒图表数据源

根据数据和需求，初始化系列并绑定数据到火柴棒图表。

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

注意： 需要添加数据源以渲染火柴棒图表。

添加火柴棒图表元素

添加诸如标记、数据标签和跟踪球等火柴棒图表元素，以显示火柴棒图表中绘制的数据的附加信息。

@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: [
                1, 5, -6, 0, 1, -2, 7, -7, -4, -10, 13, -6, 7, 5, 11, 5, 3
              ],
            )
        )
      )
  );
}

完整的示例代码如下：

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: [
          // 初始化图表小部件
          SfCartesianChart(
              primaryXAxis: CategoryAxis(),
              // 图表标题
              title: ChartTitle(text: 'Half yearly sales analysis'),
              // 启用图例
              legend: Legend(isVisible: true),
              // 启用提示框
              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',
                    // 启用数据标签
                    dataLabelSettings: DataLabelSettings(isVisible: true))
              ]),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              // 初始化火柴棒图表小部件
              child: SfSparkLineChart.custom(
                // 启用跟踪球
                trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.tap),
                // 启用标记
                marker: SparkChartMarker(
                    displayMode: SparkChartMarkerDisplayMode.all),
                // 启用数据标签
                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;
}

更多关于Flutter图表绘制插件custom_syncfusion_flutter_charts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图表绘制插件custom_syncfusion_flutter_charts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用custom_syncfusion_flutter_charts插件来绘制图表的代码示例。请注意，custom_syncfusion_flutter_charts可能并不是一个官方或广泛认可的包名，但基于你的要求，我将以Syncfusion Flutter Charts（一个流行的图表库）为例进行说明。如果你使用的确实是custom_syncfusion_flutter_charts，请确保它兼容以下代码，并根据需要进行调整。

首先，你需要在pubspec.yaml文件中添加Syncfusion Flutter Charts的依赖：

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_charts: ^x.x.x  # 请替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中创建一个简单的图表。以下是一个绘制线性图表的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Chart Demo'),
        ),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            primaryYAxis: NumericalAxis(),
            series: <ChartSeries>[
              LineSeries<SalesData, String>(
                dataSource: getSalesData(),
                xValueMapper: (SalesData sales, _) => sales.year,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }

  List<SalesData> getSalesData() {
    return [
      SalesData('2021', 35),
      SalesData('2022', 50),
      SalesData('2023', 65),
      SalesData('2024', 80),
      SalesData('2025', 70),
    ];
  }
}

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

在这个示例中，我们创建了一个简单的线性图表，显示了不同年份的销售数据。我们使用了SfCartesianChart组件，并配置了CategoryAxis和NumericalAxis作为X轴和Y轴。LineSeries用于绘制线性图表，并通过xValueMapper和yValueMapper指定了数据源中的X值和Y值。

请确保你已经在Syncfusion的网站上注册并获取了必要的API密钥（如果你使用的是付费功能），并在你的代码中正确配置了它（虽然上面的示例没有涉及API密钥的使用）。

如果你使用的确实是custom_syncfusion_flutter_charts，并且它与Syncfusion Flutter Charts有所不同，请参考该插件的官方文档或源代码进行调整。通常，图表库的用法大同小异，主要区别在于API的具体实现和配置选项。

回到顶部