Flutter蜡烛图绘制插件simple_candlestick_chart的使用

简介

simple_candlestick_chart 是一个用于Flutter应用程序中绘制蜡烛图（K线图）的简单插件。它支持平滑滚动和缩放，非常适合金融类应用中的数据可视化。

使用方法

依赖安装

首先，在您的pubspec.yaml文件中添加对simple_candlestick_chart的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_candlestick_chart: ^latest_version # 请用最新版本号替换latest_version

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

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中使用simple_candlestick_chart插件。此示例从assets加载JSON格式的历史价格数据，并将其显示为蜡烛图。

import 'dart:convert';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simple_candlestick_chart/simple_candlestick_chart.dart';

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

class CustomScrollBehavior extends MaterialScrollBehavior {
  const CustomScrollBehavior();

  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  var data = <CandlestickData>[];

  @override
  void initState() {
    super.initState();
    // 加载本地json数据
    rootBundle.loadString('assets/data.json').then((json) {
      CandlestickData map(item) => CandlestickData(
            DateTime.fromMillisecondsSinceEpoch(item['time'] * 1000),
            item['open'].toDouble(),
            item['high'].toDouble(),
            item['low'].toDouble(),
            item['close'].toDouble(),
            item['vol'].toDouble(),
          );
      final items = jsonDecode(json) as List<dynamic>;
      setState(() {
        data = items.map<CandlestickData>(map).toList().reversed.toList();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: const CustomScrollBehavior(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Simple Candlestick Chart Example'),
        ),
        body: SafeArea(
          child: Column(children: [
            SizedBox(
              height: 300,
              child: SimpleCandlestickChart(
                data: data,
                increaseColor: Colors.teal, // 上涨颜色
                decreaseColor: Colors.pinkAccent, // 下跌颜色
                physics: const BouncingScrollPhysics(), // 滚动效果
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

数据结构

蜡烛图的数据由多个CandlestickData对象组成，每个对象表示一天或一段时间内的开盘价、最高价、最低价、收盘价以及成交量。您可以根据自己的需求调整这些参数。

final data = [
  CandlestickData(DateTime.parse('2020-01-01 09:15'), 3990.99, 3991.17, 3990.78, 3993.55, 12869.11),
  CandlestickData(DateTime.parse('2020-01-01 09:00'), 3991.17, 3989.5, 3985.87, 3993.37, 13191.45),
  // 更多数据...
];

通过上述步骤，您应该能够在Flutter项目中成功集成并使用simple_candlestick_chart插件来展示蜡烛图了。如果有任何问题或者需要进一步的帮助，请随时提问！