Flutter图表展示插件graph_display的使用

Flutter图表展示插件graph_display的使用

这个包提供了可自定义的Flutter图表展示组件。

如果你不使用Flutter或者需要更特定的图表组件，可以考虑使用graph_layout来生成图表布局，并自己编写代码在屏幕上显示这些布局。

示例用法

首先构造你希望可视化的图。

// 创建一个`Graph`对象
// 这个对象是从NetworkX主页上的图创建的 https://networkx.org/
final edgeList = '''
0 1
0 2
0 3
1 2
1 3
2 3
3 4
4 5
5 6
6 7
7 8
7 9
7 10
8 9
8 10
9 10
''';
final graph = Graph.fromEdgeListString(edgeList);

然后，你可以将这个图作为一个小部件展示出来！该图可以是交互式的，允许应用程序的用户拖动节点以探索图；也可以是非交互式的，一旦生成了图布局就不需要再进行计算。

InteractiveGraph(
  layoutAlgorithm: Eades(graph: graph),
);

StaticGraph(
  layoutAlgorithm: FruchtermanReingold(graph: graph),
)

示例代码

以下是完整的示例代码，展示了如何使用graph_display插件。

import 'package:example/jean_node_data.dart';
import 'package:flutter/material.dart';
import 'package:graph_display/graph_display.dart';
import 'package:graph_layout/graph_layout.dart';
import 'package:vector_math/vector_math.dart' hide Colors;

const _demoNames = [
  '完全图（8个顶点），Eades算法',
  '完全图（8个顶点），Fruchterman-Reingold算法',
  '《悲惨世界》角色共现，Eades算法',
  '《悲惨世界》角色共现，Fruchterman-Reingold算法',
];

/// 返回具有[nodes]个节点的完全图。
Graph _generateCompleteGraph(int nodeNumber) {
  final nodes = List<int>.generate(nodeNumber, (i) => i + 1)
      .map((i) => IntegerNode(i))
      .toList();

  final edges = <Edge>{};
  for (int i = 0; i < nodeNumber; i++) {
    for (int j = 0; j < nodeNumber; j++) {
      if (i != j) {
        edges.add(Edge(left: nodes[i], right: nodes[j]));
      }
    }
  }

  return Graph.fromEdgeList(edges);
}

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

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  var _selectedDemoIndex = 0;

  Widget _displayDemo() {
    switch (_selectedDemoIndex) {
      case 0:
        return InteractiveGraph(
          layoutAlgorithm: Eades(
            graph: _generateCompleteGraph(8),
          ),
        );
      case 1:
        return StaticGraph(
          layoutAlgorithm: FruchtermanReingold(
            graph: _generateCompleteGraph(8),
          ),
        );

      case 2:
      case 3:
        return FutureBuilder<String>(
          future: DefaultAssetBundle.of(context).loadString('assets/jean.dat'),
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.connectionState == ConnectionState.done &&
                snapshot.hasData) {
              final edges = <Edge>{};

              // 每个匹配对应一章，每章包含一个或多个场景。
              final matches = RegExp(r'(?<=[0-9]:).*$', multiLine: true)
                  .allMatches(snapshot.data!)
                  .map((match) => match[0]!.split(';'))
                  .expand((e) => e);

              // 遍历每个场景。如果两个角色出现在同一个场景中，则认为它们共现。
              for (final m in matches) {
                // 这个场景中的角色。
                final characters = m
                    .split(',')
                    .map((characterString) =>
                        IntegerNode(characterString.hashCode))
                    .toList();

                // 找出这组中的每一对并将其添加为边。无需担心时间复杂度，因为[characters]很小。
                for (final char1 in characters) {
                  for (final char2 in characters) {
                    if (char1 != char2) {
                      edges.add(Edge(left: char1, right: char2));
                    }
                  }
                }
              }
              final theme = GraphThemePreferences(
                backgroundColour: Colors.blueGrey.shade50,
                edgeColour: Colors.blueGrey,
                edgeThickness: 0.2,
                nodeRadius: 15,
                drawNode: (Canvas canvas, Node node, Vector2 position) {
                  // 请参阅jean_node_data.dart以获取此颜色映射的源代码。
                  final nodePaint = Paint()..color = nodeToColour[node]!;
                  final nodeOffset = Offset(position.x, position.y);
                  canvas.drawCircle(nodeOffset, 15, nodePaint);

                  // 绘制角色标签。请参阅jean_node_data.dart以获取此数据的源代码。
                  final textSpan = TextSpan(
                    text: nodeToName[node]!,
                    style: const TextStyle(color: Colors.black),
                  );
                  final textPainter = TextPainter(
                    text: textSpan,
                    textDirection: TextDirection.ltr,
                  );
                  textPainter.layout();
                  textPainter.paint(
                    canvas,
                    nodeOffset - const Offset(7.5, 10),
                  );
                  // TODO: 最终我们需要在这里调用`textPainter.dispose()`。
                  // 请参见https://github.com/flutter/flutter/blob/0b451b6dfd6de73ff89d89081c33d0f971db1872/packages/flutter/lib/src/painting/text_painter.dart#L171。
                },
              );
              return _selectedDemoIndex == 2
                  ? InteractiveGraph(
                      layoutAlgorithm: Eades(
                        graph: Graph.fromEdgeList(edges),
                      ),
                      themePreferences: theme,
                    )
                  : StaticGraph(
                      layoutAlgorithm: FruchtermanReingold(
                        graph: Graph.fromEdgeList(edges),
                      ),
                      themePreferences: theme,
                    );
            } else if (snapshot.hasError) {
              return const Center(child: Text('错误：无法获取图表数据'));
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        );

      default:
        throw ArgumentError.value(_selectedDemoIndex, '_selectedDemoIndex');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 选择要显示的演示的下拉菜单。
            DropdownButton(
              value: _selectedDemoIndex,
              onChanged: (value) {
                setState(() {
                  _selectedDemoIndex = value!;
                });
              },
              items: List.generate(
                _demoNames.length,
                (i) => DropdownMenuItem(
                  value: i,
                  child: Text(_demoNames[i]),
                ),
              ),
            ),
            // 图表演示本身。
            _displayDemo(),
          ],
        ),
      ),
    );
  }
}