Flutter金融图表插件candlestick_plus的使用

Flutter金融图表插件candlesticks的使用

预览

IOS macOS

安装

  1. 在你的pubspec.yaml文件中添加以下依赖：

    dependencies:
  candlesticks: ^2.1.0

  2. 使用IDE的图形界面获取包，或者通过命令行执行以下命令：

    $ flutter pub get

使用

首先，你需要导入candlesticks库：

import 'package:candlesticks/candlesticks.dart';

Candle

Candle类包含六个必需的变量来保存单个蜡烛数据：日期（date）、最高价（high）、最低价（low）、开盘价（open）、收盘价（close）和成交量（volume）。

final candle =  Candle(date: DateTime.now(), open: 1780.36, high: 1873.93, low: 1755.34, close: 1848.56, volume: 0);

Candlesticks

Candlesticks小部件需要一个蜡烛列表。数组中蜡烛的排列方式应该是最新的在位置0。onLoadMoreCandles是一个可选回调，当最后一个蜡烛变得可见时会调用它。如果你想在顶部工具栏添加更多操作，比如像这里展示的Binance Candles，你可以创建自定义的ToolBarAction并将其添加到actions参数中。

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Candle> candles = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化蜡烛数据
    candles = [
      Candle(
        date: DateTime.now(),
        open: 1780.36,
        high: 1873.93,
        low: 1755.34,
        close: 1848.56,
        volume: 0,
      ),
      // 添加更多的蜡烛数据
    ];

    // 设置加载更多蜡烛的回调
    onLoadMoreCandles: () {
      // 加载更多蜡烛数据
    },
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Candlesticks Chart'),
      ),
      body: Center(
        child: Candlesticks(
          candles: candles,
          onLoadMoreCandles: () {
            // 加载更多蜡烛数据
          },
          actions: [
            // 添加自定义的工具栏动作
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


candlestick_plus 是一个用于在 Flutter 应用中绘制金融图表的插件，特别是用于绘制蜡烛图（K线图）。它可以帮助开发者轻松地展示股票、加密货币等金融数据。以下是如何使用 candlestick_plus 插件的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  candlestick_plus: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 candlestick_plus 包。

import 'package:candlestick_plus/candlestick_plus.dart';

3. 准备数据

candlestick_plus 插件需要一组 CandleData 对象来绘制蜡烛图。每个 CandleData 对象代表一个时间段的蜡烛数据。

List<CandleData> candles = [
  CandleData(
    date: DateTime(2023, 10, 1),
    open: 100.0,
    high: 110.0,
    low: 90.0,
    close: 105.0,
  ),
  CandleData(
    date: DateTime(2023, 10, 2),
    open: 105.0,
    high: 115.0,
    low: 95.0,
    close: 110.0,
  ),
  // 添加更多数据
];

4. 使用 CandlestickPlus 组件

将 CandlestickPlus 组件添加到你的 Flutter 应用中，并传入准备好的数据。

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Candlestick Chart'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: CandlestickPlus(
          candles: candles,
          // 可选配置项
          candleWidth: 8.0,
          risingColor: Colors.green,
          fallingColor: Colors.red,
          // 其他配置...
        ),
      ),
    );
  }
}

5. 运行应用

现在你可以运行你的 Flutter 应用，并查看 CandlestickPlus 组件绘制的蜡烛图。

6. 自定义配置

CandlestickPlus 组件提供了多种配置选项，允许你自定义图表的外观和行为。以下是一些常用的配置项：

  • candleWidth: 蜡烛的宽度。
  • risingColor: 上涨蜡烛的颜色。
  • fallingColor: 下跌蜡烛的颜色。
  • gridColor: 网格线的颜色。
  • backgroundColor: 图表的背景颜色。
  • showGrid: 是否显示网格线。
  • showXAxis: 是否显示 X 轴。
  • showYAxis: 是否显示 Y 轴。

你可以根据需要进行调整。

7. 处理交互

CandlestickPlus 还支持用户交互，例如缩放和拖动。你可以通过监听相关事件来处理这些交互。

CandlestickPlus(
  candles: candles,
  onScaleUpdate: (scale) {
    // 处理缩放事件
  },
  onHorizontalDragUpdate: (offset) {
    // 处理水平拖动事件
  },
);
回到顶部