Flutter自定义圆形图表插件custom_circular_chart_flutter的使用

Flutter 自定义圆形图表插件 custom_circular_chart_flutter 的使用

概述

通过提供数据对象，可以轻松创建动画的饼状图和径向图。

目录

安装

从 pub 安装最新版本：

dependencies:
  flutter_circular_chart: ^0.2.0

入门

首先导入包：

import 'package:flutter_circular_chart/flutter_circular_chart.dart';

然后创建一个 GlobalKey 以便能够访问图表并更新其数据：

final GlobalKey<AnimatedCircularChartState> _chartKey = new GlobalKey<AnimatedCircularChartState>();

接下来创建图表数据条目对象：

List<CircularStackEntry> data = <CircularStackEntry>[
  new CircularStackEntry(
    <CircularSegmentEntry>[
      new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
      new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
      new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
      new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
    ],
    rankKey: 'Quarterly Profits',
  ),
];

创建 AnimatedCircularChart 并传递 _chartKey 和初始数据：

@override
Widget build(BuildContext context) {
  return new AnimatedCircularChart(
    key: _chartKey,
    size: const Size(300.0, 300.0),
    initialChartData: data,
    chartType: CircularChartType.Pie,
  );
}

调用 updateData 来使图表动画化：

void _cycleSamples() {
  List<CircularStackEntry> nextData = <CircularStackEntry>[
    new CircularStackEntry(
      <CircularSegmentEntry>[
        new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
        new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
        new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
        new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
      ],
      rankKey: 'Quarterly Profits',
    ),
  ];
  setState(() {
    _chartKey.currentState.updateData(nextData);
  });
}

定制化

圆孔标签
属性 默认值
holeLabel null
labelStyle Theme.of(context).textTheme.body2

示例：

new AnimatedCircularChart(
  key: _chartKey,
  size: _chartSize,
  initialChartData: <CircularStackEntry>[
    new CircularStackEntry(
      <CircularSegmentEntry>[
        new CircularSegmentEntry(
          33.33,
          Colors.blue[400],
          rankKey: 'completed',
        ),
        new CircularSegmentEntry(
          66.67,
          Colors.blueGrey[600],
          rankKey: 'remaining',
        ),
      ],
      rankKey: 'progress',
    ),
  ],
  chartType: CircularChartType.Radial,
  percentageValues: true,
  holeLabel: '1/3',
  labelStyle: new TextStyle(
    color: Colors.blueGrey[600],
    fontWeight: FontWeight.bold,
    fontSize: 24.0,
  ),
)
分段边缘样式
属性 默认值
edgeStyle SegmentEdgeStyle.flat

分段边缘样式：

  • flat（默认）：分段以平边开始和结束。
  • round：分段以半圆开始和结束。

示例：

new AnimatedCircularChart(
  key: _chartKey,
  size: _chartSize,
  initialChartData: <CircularStackEntry>[
    new CircularStackEntry(
      <CircularSegmentEntry>[
        new CircularSegmentEntry(
          33.33,
          Colors.blue[400],
          rankKey: 'completed',
        ),
        new CircularSegmentEntry(
          66.67,
          Colors.blueGrey[600],
          rankKey: 'remaining',
        ),
      ],
      rankKey: 'progress',
    ),
  ],
  chartType: CircularChartType.Radial,
  edgeStyle: SegmentEdgeStyle.round,
  percentageValues: true,
)

更多关于Flutter自定义圆形图表插件custom_circular_chart_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义圆形图表插件custom_circular_chart_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


custom_circular_chart_flutter 是一个用于在 Flutter 应用中创建自定义圆形图表的插件。它允许你以简单的方式创建各种类型的圆形图表，如饼图、环形图等。以下是如何使用这个插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 custom_circular_chart_flutter 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  custom_circular_chart_flutter: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:custom_circular_chart_flutter/custom_circular_chart_flutter.dart';

3. 创建圆形图表

你可以使用 CircularChart 小部件来创建圆形图表。以下是一个简单的示例，展示如何创建一个饼图：

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

class CircularChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Circular Chart Example'),
      ),
      body: Center(
        child: CircularChart(
          chartType: CircularChartType.Pie,
          sections: [
            CircularChartSection(
              color: Colors.blue,
              value: 30,
              label: 'Category A',
            ),
            CircularChartSection(
              color: Colors.red,
              value: 50,
              label: 'Category B',
            ),
            CircularChartSection(
              color: Colors.green,
              value: 20,
              label: 'Category C',
            ),
          ],
          strokeWidth: 10,
          labelStyle: TextStyle(
            color: Colors.black,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CircularChartExample(),
  ));
}

4. 自定义图表

CircularChart 提供了多种自定义选项，包括：

  • chartType: 图表的类型，如 CircularChartType.Pie（饼图）或 CircularChartType.Ring（环形图）。
  • sections: 图表的部分，每个部分可以指定颜色、值和标签。
  • strokeWidth: 图表的线条宽度。
  • labelStyle: 标签的文本样式。
  • startAngle: 图表开始的角度（以度为单位）。
  • animate: 是否启用动画效果。

5. 运行应用

保存文件并运行你的 Flutter 应用。你应该会看到一个自定义的圆形图表。

6. 进一步自定义

你可以根据需求进一步自定义图表的外观和行为。例如，你可以调整颜色、添加动画效果、或者将图表嵌入到其他小部件中。

7. 处理交互

如果需要处理图表的交互（如点击事件），你可以使用 GestureDetector 包裹 CircularChart 小部件，并在 onTap 回调中处理点击事件。

GestureDetector(
  onTap: () {
    print('Chart tapped!');
  },
  child: CircularChart(
    // 其他参数
  ),
)
回到顶部