Flutter图表绘制插件flutter_chart的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter图表绘制插件flutter_chart的使用

绘制曲线,折线,柱状,饼图，包含动画效果和触摸操作

如何使用？

  1. 添加依赖
flutter_chart: ^0.1.5

UI示例

  • 曲线图 曲线图

  • 柱状图 柱状图

  • 折线图 折线图

示例代码

import 'package:flutter/material.dart';

import 'example_page.dart';

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

在 main.dart 文件中，你可以看到一个简单的的页面结构。接下来，我们将展示如何使用 flutter_chart 插件来绘制各种类型的图表。

class Example extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Chart Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 曲线图
              Expanded(
                child: CurveChart(
                  data: [1, 2, 3, 4, 5 ],
                  title: 'Curve Chart',
                  subtitle: 'Subtitle for the curve chart',
                  animate: true,
                ),
              ),
              SizedBox(height: 20),
              // 柱状图
              Expanded(
                child: BarChart(
                  data: [ 1,  b,  c,  d,  e ],
                  title: 'Bar Chart',
                  subtitle: 'Subtitle for the bar chart',
                  animate: true,
                ),
              ),
              SizedBox(height: 20),
              // 折线图
              Expanded(
                child: LineChart(
                  data: [ a, b, c, d, e ],
                  title: 'Line Chart',
                  subtitle: 'Subtitle for the line chart',
                  animate: true,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图表绘制插件flutter_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图表绘制插件flutter_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 flutter_chart 插件（假设你指的是一个常见的 Flutter 图表库，例如 flutter_echarts 或类似的库，因为 flutter_chart 不是一个广泛认知的官方库名）来绘制简单图表的示例。由于 flutter_chart 不是特定的库名，我将以 flutter_echarts 为例，它是一个非常流行的 Flutter 图表库。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_echarts: ^1.6.0  # 请检查最新版本号

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

接下来，你可以在你的 Flutter 应用中使用 flutter_echarts 来绘制一个简单的图表。以下是一个完整的示例，展示如何在一个 Flutter 应用中绘制一个基本的柱状图（Bar Chart）：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ECharts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  EchartsController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    _controller = EchartsController(
      'main', // 图表ID
      option: '''
        {
          "title": {
            "text": "ECharts 入门示例"
          },
          "tooltip": {},
          "xAxis": {
            "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          "yAxis": {},
          "series": [{
            "name": "销量",
            "type": "bar",
            "data": [5, 20, 36, 10, 10, 20]
          }]
        }
      ''',
    );
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放控制器资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ECharts Demo'),
      ),
      body: Center(
        child: SizedBox(
          width: double.infinity,
          height: 400,
          child: Echarts(
            controller: _controller,
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了 flutter_echarts 包。
  2. 创建了一个 MyApp 应用入口。
  3. 在 MyHomePage 中，我们定义了一个 EchartsController，并设置了图表的配置选项（option），这里定义了一个简单的柱状图。
  4. 在 dispose 方法中，我们释放了 EchartsController 的资源。
  5. 在 build 方法中，我们使用 Echarts 组件来显示图表，并将其包裹在一个 SizedBox 中以确保它有一个固定的大小。

你可以根据需要调整 option 中的配置来绘制不同类型的图表，如折线图、饼图等。flutter_echarts 提供了丰富的配置选项，可以满足大多数图表需求。

回到顶部