Flutter图表绘制插件phoenix_charts的使用

Flutter图表绘制插件phoenix_charts的使用

特性

phoenix 将作为企业级基础组件:Charts, 提供项目支持。

开始使用

要开始使用 phoenix_charts，首先需要在 pubspec.yaml 文件中添加依赖项。以下是一个示例：

dependencies:
  flutter:
    sdk: flutter
  phoenix_charts: ^1.0.0 # 请根据实际情况选择合适的版本号

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

使用指南

以下是使用 phoenix_charts 的示例代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:phoenix_charts/phoenix_charts.dart';

import 'doughnut_chart.dart';
import 'line/broken_line.dart';
import 'line/chart_entry.dart';
import 'line/db_data_node_model.dart';
import 'progress_bar_chart.dart';
import 'progress_chart.dart';
import 'radar_chat.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  var brokenData = <DBDataNodeModel>[];

  [@override](/user/override)
  void initState() {
    super.initState();
    rootBundle.loadString('assets/brokenline_data.json').then((data) {
      brokenData = <DBDataNodeModel>[]..addAll(
          ((JsonDecoder().convert(data) as List?) ?? [])
              .map((o) => DBDataNodeModel.fromJson(o)));
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: RepaintBoundary(
          child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按下了按钮次数:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            RadarChartExample(),
            DoughnutChartExample(),
            ProgressBarChartExample(),
            ProgressChartExample(),
            if (brokenData.isNotEmpty) BrokenLineExample(brokenData),
            FunnelChartExample()
          ],
        ),
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

雷达图示例

class RadarChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return RadarChart(
      data: [
        RadarChartData(
          labels: ['A', 'B', 'C', 'D'],
          datasets: [
            RadarChartDataset(
              label: 'Dataset 1',
              data: [10, 20, 30, 40],
              color: Colors.blue,
            ),
          ],
        ),
      ],
    );
  }
}

圆环图示例

class DoughnutChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DoughnutChart(
      data: [
        DoughnutChartData(
          sections: [
            DoughnutChartSection(
              value: 30,
              label: 'Section A',
              color: Colors.red,
            ),
            DoughnutChartSection(
              value: 70,
              label: 'Section B',
              color: Colors.green,
            ),
          ],
        ),
      ],
    );
  }
}

进度条图示例

class ProgressBarChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ProgressBarChart(
      data: [
        ProgressBarChartData(
          progress: 0.7,
          label: 'Progress Bar',
          color: Colors.orange,
        ),
      ],
    );
  }
}

折线图示例

class BrokenLineExample extends StatelessWidget {
  final List<DBDataNodeModel> data;

  BrokenLineExample(this.data);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BrokenLineChart(
      data: data.map((item) => ChartEntry(x: item.x, y: item.y)).toList(),
    );
  }
}