Flutter图表绘制插件fcharts的使用

fcharts

fcharts 是一个为 Flutter 开发的图表库，目前仍处于开发阶段。在版本达到 1.0.0 之前，API 可能会发生重大变化。因此，fcharts 当前并不适合用于生产环境。

该项目的目标是通过简单直观的 API 创建美观且响应式的图表。

该库受 Mikkel Ravn 在 Flutter 小部件和动画教程的启发，并且如果您熟悉 ReactJS 的 Recharts 库，那么您可能会发现它的高级 API 非常熟悉。

Demo

示例用法

以下是一个简单的折线图示例：

class SimpleLineChart extends StatelessWidget {
  // X 值 -> Y 值
  static const myData = [
    ["A", "✔"],
    ["B", "❓"],
    ["C", "✖"],
    ["D", "❓"],
    ["E", "✖"],
    ["F", "✖"],
    ["G", "✔"],
  ];
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new LineChart(
      lines: [
        new Line<List<String>, String, String>(
          data: myData,
          xFn: (datum) => datum[0], // X 轴数据提取函数
          yFn: (datum) => datum[1], // Y 轴数据提取函数
        ),
      ],
      chartPadding: new EdgeInsets.fromLTRB(30.0, 10.0, 10.0, 30.0), // 图表边距
    );
  }
}

上述代码创建了以下折线图：

完整示例 Demo

以下是完整的示例代码，展示了如何使用 fcharts 绘制不同类型的图表：

import 'bar/simple.dart';
import 'line/cities.dart';
import 'line/simple.dart';
import 'line/updating.dart';
import 'package:flutter/material.dart';

void main() => runApp(new FChartsExampleApp());

class ChartExample {
  ChartExample(this.name, this.widget, this.description);

  final String name;
  final Widget widget;
  final String description;
}

// 定义不同类型的图表示例
final charts = [
  new ChartExample(
    'Simple Line Chart',
    new SimpleLineChart(),
    'Strings on the X-Axis and their index in the list on the Y-Axis.',
  ),
  new ChartExample(
    'City Coolness & Size Line Chart',
    new CityLineChart(),
    'Cities on the X-Axis with coolness & size on the Y-Axis with painted lines.',
  ),
  new ChartExample(
    'Updating Sparkline Chart',
    new UpdatingChart(),
    'Just a list of doubles that updates periodically.',
  ),
  new ChartExample(
    'Simple Bar Chart',
    new SimpleBarChart(),
    'Bar charts are not quite ready yet.',
  ),
];

// 主应用类
class FChartsExampleApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<FChartsExampleApp> {
  var _chartIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final chart = charts[_chartIndex % charts.length];

    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Example: ${chart.name}'),
        ),
        body: new Container(
          decoration: new BoxDecoration(
            color: Colors.white,
          ),
          child: new Column(
            children: [
              new Padding(
                padding: new EdgeInsets.all(30.0),
                child: new Text(
                  chart.description,
                  textAlign: TextAlign.center,
                ),
              ),
              new Padding(
                  padding: new EdgeInsets.all(20.0),
                  child: new Container(
                    child: chart.widget,
                  )),
            ],
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: () {
            setState(() => _chartIndex++);
          },
          child: new Icon(Icons.refresh),
        ),
      ),
    );
  }
}