Flutter图表绘制插件flutter_chart_plus的使用

Flutter图表绘制插件flutter_chart_plus的使用

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_chart_plus: any

或者通过 Git 直接克隆代码库：

dependencies:
  flutter_chart_plus:
    git:
      url: https://github.com/JDongKhan/flutter_chart
      ref: main

然后运行 flutter pub get 来安装插件。

2. 导入插件

在你的 Dart 文件中导入 flutter_chart_plus：

import 'package:flutter_chart_plus/flutter_chart.dart';

3. 示例代码

下面是一个完整的示例代码，展示如何使用 flutter_chart_plus 插件来绘制不同类型的图表。我们将创建一个简单的应用，包含 LineChart、BarChart 和 PieChart。

import 'package:flutter/material.dart';

import 'chart_demo_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamilyFallback: ['Roboto'],
        primarySwatch: Colors.blue,
      ),
      home: ChartDemoPage(),
    );
  }
}

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

  [@override](/user/override)
  _ChartDemoPageState createState() => _ChartDemoPageState();
}

class _ChartDemoPageState extends State<ChartDemoPage> {
  List<Map<String, dynamic>> data = [
    {'time': DateTime.now(), 'value1': 10, 'value2': 20, 'value3': 30},
    {'time': DateTime.now(), 'value1': 20, 'value2': 40, 'value3': 50},
    {'time': DateTime.now(), 'value1': 30, 'value2': 60, 'value3': 70},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Chart Plus'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ChartWidget(
                coordinateRender: ChartDimensionsCoordinateRender(
                  yAxis: [
                    YAxis(min: 0, max: 100)
                        , drawGrid: true),
                    YAxis(min: 0, max: 100, offset: (size) =&gt; Offset(size.width - 70, 0)),
                  ],
                  margin: const EdgeInsets.only(left: 40, top: 5, right: 30, bottom: 30),
                  xAxis: XAxis(
                    count: 7,
                    max: 20,
                    zoom: true,
                    formatter: (index) =&gt; startTime.add(Duration(days: index)).toStringWithFormat(format: 'dd'),
                  ),
                  charts: [
                    Bar(
                      color: Colors.yellow,
                      data: data,
                      yAxisPosition: 1,
                      position: (item) =&gt; parserDateTimeToDayValue(item['time'] as DateTime, startTime),
                      value: (item) =&gt; item['value1'],
                    ),
                    Line(
                      data: data,
                      position: (item) =&gt; parserDateTimeToDayValue(item['time'] as DateTime, startTime),
                      values: (item) =&gt; [
                        item['value1'] as num,
                      ],
                    ),
                    Line(
                      colors: [Colors.green],
                      data: data,
                      position: (item) =&gt; parserDateTimeToDayValue(item['time'] as DateTime, startTime),
                      values: (item) =&gt; [
                        item['value2'] as num,
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ChartWidget(
                coordinateRender: ChartCircularCoordinateRender(
                  margin: const EdgeInsets.only(left: 40, top: 0, right: 0, bottom: 10),
                  charts: [
                    Pie(
                      data: data,
                      position: ( (item) =&gt; ( double.parse(item['value1'].toString()),
                      holeRadius: 40,
                      valueTextOffset: 20,
                      centerTextStyle: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold),
                      valueFormatter: (item) =&gt; item['value1'].toString(),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}