Flutter图表绘制插件multi_charts的使用

multi_charts简介

multi_charts 是一个用于在Flutter应用程序中绘制不同类型的图表的库。目前它支持雷达图（Radar Chart）和饼图（Pie Chart），未来会支持更多类型的图表。

Radar Chart (雷达图)

雷达图以蜘蛛网或雷达的形式绘制数据点。它需要以下参数：

• values：必需，提供数据点，最少需要3个值。
• maxValue：必需，定义图表的刻度，例如最大值为10，则每个层级代表2。

其他可选参数包括但不限于：

• labels：显示在图表上的标签，默认为数据点的值。
• size：定义画布区域，默认为无限大小，受父组件约束。
• fillColor：填充颜色，默认为 Colors.black26。
• strokeColor：图表轮廓颜色，默认为 Colors.black87。
• labelColor：标签颜色，默认为 Colors.black。
• maxHeight 和 maxWidth：定义图表的最大宽度和高度，当没有父组件约束时生效。
• textScaleFactor：标签文本大小的比例因子，默认为0.04。
• labelWidth：标签的最大宽度，默认根据图表大小计算。
• maxLinesForLabels：标签文本的最大行数，默认为容器高度的百分之一。
• animate：是否启用动画，默认为 true。
• animationDuration：动画持续时间，默认为1500毫秒。
• curve：动画进度的非线性方式。
• chartRadiusFactor：图表半径相对于宽高最小值的比例，默认为0.8。

Pie Chart (饼图)

饼图以饼状图的形式绘制数据点。它需要以下参数：

• values：必需，提供数据点。

其他可选参数包括但不限于：

• labels：显示在图表上的标签，默认为数据点的值。
• size：定义画布区域，默认为无限大小，受父组件约束。
• sliceFillColors：每个扇区的颜色，默认随机生成。
• maxHeight 和 maxWidth：定义图表的最大宽度和高度，当没有父组件约束时生效。
• labelColor：图表数值颜色，默认为 Colors.black87。
• legendTextColor：图例文本颜色，默认为 Colors.black。
• legendPosition：图例位置，默认为右侧。
• legendIconSize：图例图标大小，默认为10.0。
• legendTextSize：图例文本大小，默认为16.0。
• legendItemPadding：图例项之间的内边距，默认为8.0。
• legendIconShape：图例图标形状，默认为方形。
• textScaleFactor：标签文本大小的比例因子，默认为0.04。
• animate：是否启用动画，默认为 true。
• animationDuration：动画持续时间，默认为1500毫秒。
• curve：动画进度的非线性方式。
• separateFocusedValue：是否突出显示特定值，默认为 false。
• separatedValueType：要突出显示的值类型，默认为最大值。
• startAngle：饼图起始角度，默认为180度。
• showLegend：是否显示图例，默认为 true。

示例代码

以下是使用 multi_charts 插件绘制雷达图和饼图的完整示例代码：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Radar Chart Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Radar and Pie Chart Example"),
        ),
        body: Column(children: [
          Container(
            width: 450,
            height: 450,
            // Radar Chart
            child: RadarChart(
              values: [1, 2, 4, 7, 9, 0, 6],
              labels: [
                "Label1",
                "Label2",
                "Label3",
                "Label4",
                "Label5",
                "Label6",
                "Label7",
              ],
              maxValue: 10,
              fillColor: Colors.blue,
              chartRadiusFactor: 0.7,
            ),
          ),
          SizedBox(height: 20),
          // Pie Chart
          PieChart(
            values: [15, 10, 30, 25, 20],
            labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
            sliceFillColors: [
              Colors.blueAccent,
              Colors.greenAccent,
              Colors.pink,
              Colors.orange,
              Colors.red,
            ],
            animationDuration: Duration(milliseconds: 1500),
            legendPosition: LegendPosition.Right,
          ),
        ]),
      ),
    );
  }
}

此代码展示了如何在一个页面中同时绘制雷达图和饼图，并设置了不同的样式和配置。您可以根据需要调整参数以满足您的需求。