Flutter图表展示插件deriv_chart的使用

deriv_chart 是一个专门为Flutter应用程序设计的金融图表库，支持多种图表类型（如蜡烛图、折线图等）、各种技术指标（如RSI、MACD、布林带等）和交互式绘图工具。本文将介绍如何在Flutter应用中使用该插件，并提供一个完整的示例代码。

要求

• Dart SDK: >=3.0.0 <4.0.0
• Flutter: >=3.10.1

安装

在项目的 pubspec.yaml 文件中添加以下内容：

dependencies:
  deriv_chart: ^0.3.7

然后运行 flutter pub get 来安装依赖。

使用

首先需要导入库：

import 'package:deriv_chart/deriv_chart.dart';

基本图表

最简单的用法是添加一个蜡烛图：

final candle1 = Candle(
  epoch: DateTime.now(),
  high: 400,
  low: 50,
  open: 200,
  close: 100,
);

final candle2 = Candle(
  epoch: DateTime.now().add(Duration(days: 1)),
  high: 500,
  low: 100,
  open: 100,
  close: 500,
);

final candles = [candle1, candle2];

Chart(
  mainSeries: CandleSeries(candles),
  pipSize: 3, // Y轴显示值的小数位数
  granularity: 60 * 1000, // 烛台周期，以毫秒为单位
);

要显示折线图，可以传递 LineSeries：

Chart(
  mainSeries: LineSeries(candles),
  pipSize: 3,
);

样式设置

可以通过 style 参数自定义蜡烛图或折线图的外观：

Chart(
  mainSeries: CandleSeries(
    candles, 
    style: CandleStyle(
        positiveColor: Colors.green, 
        negativeColor: Colors.red
    ),
  ),
  pipSize: 3,
  granularity: 60 * 1000,
);

注释

可以通过 annotations 参数添加水平或垂直障碍线：

Chart(
  mainSeries: LineSeries(candles),
  pipSize: 3,
  annotations: <ChartAnnotation>[
    HorizontalBarrier(98161.950),
    VerticalBarrier(candles.last.epoch, title: 'V Barrier'),
  ],
);

注释的样式也可以自定义：

HorizontalBarrier(
      ...
      style: HorizontalBarrierStyle(
        color: const Color(0xFF00A79E),
        isDashed: false,
      ),
      visibility: HorizontalBarrierVisibility.forceToStayOnRange,
)

技术指标

通过 overlayConfigs 和 bottomConfigs 添加技术指标：

Chart(
  mainSeries: CandleSeries(candles),
  overlayConfigs: [
    BollingerBandsIndicatorConfig(
      period: 20,
      standardDeviation: 2,
      movingAverageType: MovingAverageType.exponential,
      upperLineStyle: LineStyle(color: Colors.purple),
      middleLineStyle: LineStyle(color: Colors.black),
      lowerLineStyle: LineStyle(color: Colors.blue),
    ),
  ],
  bottomConfigs: [
    SMIIndicatorConfig(
      period: 14,
      signalPeriod: 9,
      lineStyle: LineStyle(color: Colors.blue, thickness: 2),
      signalLineStyle: LineStyle(color: Colors.red),
    ),
    RSIIndicatorConfig(
      period: 14,
      lineStyle: LineStyle(
        color: Colors.green,
        thickness: 1,
      ),
      oscillatorLinesConfig: OscillatorLinesConfig(
        overboughtValue: 70,
        oversoldValue: 30,
        overboughtStyle: LineStyle(color: Colors.red),
        oversoldStyle: LineStyle(color: Colors.green),
      ),
      showZones: true,
    ),
  ],
  pipSize: 3,
  granularity: 60 * 1000,
);

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成 deriv_chart 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Deriv Chart Example')),
        body: FullscreenChart(),
      ),
    );
  }
}

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

class _FullscreenChartState extends State<FullscreenChart> {
  final List<Candle> candles = [
    Candle(
      epoch: DateTime.now().millisecondsSinceEpoch,
      high: 150,
      low: 100,
      open: 120,
      close: 130,
    ),
    Candle(
      epoch: DateTime.now().add(Duration(days: 1)).millisecondsSinceEpoch,
      high: 160,
      low: 110,
      open: 125,
      close: 140,
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DerivChart(
      mainSeries: CandleSeries(candles),
      pipSize: 3,
      granularity: 60 * 1000,
    );
  }
}