Flutter图表绘制插件spider_chart_extended的使用

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

Flutter图表绘制插件spider_chart_extended的使用

该包帮助您绘制带有雷达图覆盖的蜘蛛图。着色方案始终取决于通过的数据。

示例结果

示例结果

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题。
        //
        // 尝试这个：运行您的应用并看到应用有一个蓝色工具栏。然后，在不退出应用的情况下，
        // 将颜色方案中的seedColor更改为Colors.green并触发“热重载”（保存更改或在支持热重载的IDE中按“热重载”按钮，或者如果使用命令行启动应用，则按“r”）。
        //
        // 注意计数器并没有重置为零；应用的状态在重新加载过程中不会丢失。要重置状态，使用热重启。
        //
        // 这也适用于代码，而不仅仅是值：大多数代码更改都可以通过热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  Example({super.key});
  // 数据列表
  List<List<num>> data = [
    [
      5.0,
      5.0,
      5.0,
      5.0,
      5.0,
      5.0,
      5.0,
    ]
  ];
  // 刻度
  final ticks = [0, 2, 4, 6, 8, 10, 12];
  // 颜色列表
  final colorList = [
    const Color(0xff62ACD6),
    const Color(0xffE69138),
    const Color(0xff4EA8A8),
    const Color(0xff38761D),
    const Color(0xff504EA8),
    const Color(0xff674EA8),
    const Color(0xff6499E8),
  ];
  // 特征标签
  final features = [
    "General",
    "Work",
    "Play",
    "Religious",
    "Office",
    "University",
    "Pub",
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text("Spider Chart"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: SpiderChart(
          tickColor: colorList, // 刻度颜色
          axisColor: Colors.black, // 轴线颜色
          ticks: ticks, // 刻度数组
          features: features, // 特征标签数组
          data: data, // 数据数组
          reverseAxis: false, // 是否反转轴
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用spider_chart_extended插件来绘制蜘蛛网图（雷达图）的代码示例。

首先，确保你已经在pubspec.yaml文件中添加了spider_chart_extended依赖：

dependencies:
  flutter:
    sdk: flutter
  spider_chart_extended: ^最新版本号 # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter项目中创建并配置一个蜘蛛网图。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spider Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SpiderChartExample(),
    );
  }
}

class SpiderChartExample extends StatelessWidget {
  final List<String> labels = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
  ];

  final List<double> maxValue = List.filled(6, 100.0); // 每个维度的最大值

  final List<double> data1 = [80, 90, 70, 60, 85, 95]; // 第一组数据
  final List<double> data2 = [65, 75, 85, 95, 70, 60]; // 第二组数据

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spider Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SpiderChart(
              labels: labels,
              maxValue: maxValue,
              data: [
                SpiderChartData(
                  data: data1,
                  color: Colors.blue,
                  label: 'Data 1',
                ),
                SpiderChartData(
                  data: data2,
                  color: Colors.red,
                  label: 'Data 2',
                ),
              ],
              webLineWidth: 2.0,
              axisLineWidth: 1.5,
              axisLabelStyle: TextStyle(fontSize: 12),
              chartLabelStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
              showAxes: true,
              showWeb: true,
              showLabels: true,
              showChartLabels: true,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含两个数据集的蜘蛛网图。每个数据集都由一组值和对应的颜色表示。我们还配置了图表的标签、最大值、线条宽度、文本样式等属性。

  • labels：表示每个维度的标签。
  • maxValue：表示每个维度的最大值，用于标准化数据。
  • data：包含多组数据，每组数据都是一个SpiderChartData对象，包含实际数据、颜色和标签。

SpiderChart组件的其他属性允许你自定义图表的外观，例如线条宽度、文本样式、是否显示轴线、网格线和标签等。

你可以根据需要调整这些属性来满足你的具体需求。希望这个示例对你有帮助！

回到顶部