Question

我想在Flutter应用中显示雷达图。我找到了这个图书馆： this 但是我不知道如何使用flutter应用程序来完成这项工作，并且我没有找到任何明确的示例。我也愿意接受其他图书馆使用我的应用程序中的雷达图的建议。我已经绑了这个：

import 'package:flutter/material.dart';
import 'package:modern_charts/modern_charts.dart' as cart;


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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
 static var table =  cart.DataTable(
    [
        ['Categories', 'Series 1'],
        ['Monday', 1],
        ['Tuesday', 3],
        ['Wednesday', 4],
        ['Thursday', null],
        ['Friday', 3],
        ['Saturday', 5],
        ['Sunday', 4]]);

// Define user options.
static var options = {
  'series': {
    'labels': {
      'enabled': true
    }
  }
};
static Center centre = Center();

// Create and render the chart.
var chart = cart.RadarChart(centre)
..draw(table, options);


  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Plugin example app'),
        ),
        body: centre,
        ),
      );

  }
}

谢谢。

Answer 1

我知道这个问题很旧，但是我也正在为此寻找一个图书馆，并认为如果有其他人遇到这个问题，我愿意与大家分享。

我找不到任何可以做蜘蛛图/雷达图的抖动，所以我写了一个简单的库来满足我的要求。它没有很多功能，但是效果很好。

免责声明：我写了这个库

https://pub.dartlang.org/packages/spider_chart

以下是其外观示例：

以及用法示例：

Center(
  child: Container(
    width: 300,
    height: 300,
    child: SpiderChart(
      data: [
        7,
        5,
        10,
        7,
        4,
      ],
      maxValue: 10, // the maximum value that you want to represent (essentially sets the data scale of the chart)
      colors: <Color>[
        Colors.red,
        Colors.green,
        Colors.blue,
        Colors.yellow,
        Colors.indigo,
      ],
    ),
  ),
)

希望这对某人有帮助！

Answer 2

您要使用的软件包用于Web。这是Flutter的一些软件包：

fcharts

charts_flutter

flutter_circular_chart

flutter_sparkline

flutter_candlesticks

您还可以在Flutter中使用动画制作自己的图表并绘制助手。

Answer 3

任何需要更多自定义版本雷达图的人，我都制作了一个“ multi_charts”软件包，其中提供了Radar / Spider Chart并具有许多自定义功能。请在此处Multi Charts

进行检查

想要在Flutter应用中显示雷达图

3 个答案: