Flutter图表绘制插件k_chart_flutter的使用

Flutter图表绘制插件k_chart_flutter的使用

1. 插件简介

k_chart_flutter 是一个用于在Flutter中绘制K线图的插件，支持多种手势操作和常见的技术指标。以下是该插件的主要功能：

• 手势支持：支持拖动、缩放、长按、快速滑动等手势。
• 主图指标：支持移动平均线（MA）和布林带（BOLL）。
• 副图指标：支持MACD、KDJ、RSI、WR、CCI等技术指标。

2. 安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  k_chart_flutter: ^1.0.0

3. 使用示例

以下是一个完整的示例代码，展示了如何使用 k_chart_flutter 插件来绘制K线图，并提供了切换不同图表模式、显示/隐藏成交量、切换语言等功能。

示例代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'package:k_chart_flutter/chart_translations.dart';
import 'package:k_chart_flutter/k_chart_flutter.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.green),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class MyHomePageState extends State<MyHomePage> {
  List<KLineEntity>? data;
  bool showLoading = true;
  MainState _mainState = MainState.MA;
  bool _volHidden = false;
  SecondaryState _secondaryState = SecondaryState.MACD;
  bool isLine = true;
  bool isChinese = true;
  bool _hideGrid = false;
  bool _showNowPrice = true;
  List<DepthEntity>? _bids, _asks;
  bool isChangeUI = false;
  bool _isTrendLine = false;

  ChartStyle chartStyle = ChartStyle(
    select: const ChartSelectStyle(y: ChartCrossLineStyle(color: Colors.red, length: 20)),
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    // 获取K线数据
    getData('1day');

    // 加载深度数据
    final result = await rootBundle.loadString('assets/depth.json');
    final parseJson = json.decode(result);
    final tick = parseJson['tick'] as Map<String, dynamic>;

    final List<DepthEntity> bids = (tick['bids'] as List<dynamic>)
        .map((item) => DepthEntity(item[0] as double, item[1] as double))
        .toList();
    final List<DepthEntity> asks = (tick['asks'] as List<dynamic>)
        .map((item) => DepthEntity(item[0] as double, item[1] as double))
        .toList();

    initDepth(bids, asks);
  }

  void initDepth(List<DepthEntity>? bids, List<DepthEntity>? asks) {
    if (bids == null || asks == null || bids.isEmpty || asks.isEmpty) return;

    _bids = [];
    _asks = [];
    double amount = 0.0;
    bids.sort((left, right) => left.price.compareTo(right.price));
    // 累加买入委托量
    for (var item in bids.reversed) {
      amount += item.vol;
      item.vol = amount;
      _bids!.insert(0, item);
    }

    amount = 0.0;
    asks.sort((left, right) => left.price.compareTo(right.price));
    // 累加卖出委托量
    for (var item in asks) {
      amount += item.vol;
      item.vol = amount;
      _asks!.add(item);
    }
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: [
        Stack(
          children: [
            SizedBox(
              height: 450,
              width: double.infinity,
              child: KChartWidget(
                data: data,
                style: chartStyle,
                isLine: isLine,
                isTrendLine: _isTrendLine,
                mainState: _mainState,
                volHidden: _volHidden,
                secondaryState: _secondaryState,
                timeFormat: TimeFormat.YEAR_MONTH_DAY,
                translations: kChartTranslations,
                showNowPrice: _showNowPrice,
                hideGrid: _hideGrid,
                isTapShowInfoDialog: true,
                maDayList: const [1, 100, 1000],
                dataFormat: (value) => value.toStringAsFixed(2),
              ),
            ),
            if (showLoading)
              Container(
                width: double.infinity,
                height: 450,
                alignment: Alignment.center,
                child: const CircularProgressIndicator(),
              ),
          ],
        ),
        buildButtons(),
        if (_bids != null && _asks != null)
          SizedBox(
            height: 230,
            width: double.infinity,
            child: DepthChart(
              bids: _bids!,
              asks: _asks!,
              colors: const DepthColors(),
            ),
          ),
      ],
    );
  }

  Widget buildButtons() {
    return Wrap(
      alignment: WrapAlignment.spaceEvenly,
      children: [
        button("时间模式", onPressed: () => isLine = true),
        button("K线模式", onPressed: () => isLine = false),
        button("趋势线", onPressed: () => _isTrendLine = !_isTrendLine),
        button("主图:MA", onPressed: () => _mainState = MainState.MA),
        button("主图:BOLL", onPressed: () => _mainState = MainState.BOLL),
        button("隐藏主图", onPressed: () => _mainState = MainState.NONE),
        button("副图:MACD", onPressed: () => _secondaryState = SecondaryState.MACD),
        button("副图:KDJ", onPressed: () => _secondaryState = SecondaryState.KDJ),
        button("副图:RSI", onPressed: () => _secondaryState = SecondaryState.RSI),
        button("副图:WR", onPressed: () => _secondaryState = SecondaryState.WR),
        button("副图:CCI", onPressed: () => _secondaryState = SecondaryState.CCI),
        button("隐藏副图", onPressed: () => _secondaryState = SecondaryState.NONE),
        button(_volHidden ? "显示成交量" : "隐藏成交量", onPressed: () => _volHidden = !_volHidden),
        button("切换语言", onPressed: () => isChinese = !isChinese),
        button(_hideGrid ? "显示网格" : "隐藏网格", onPressed: () => _hideGrid = !_hideGrid),
        button(_showNowPrice ? "隐藏当前价格" : "显示当前价格", onPressed: () => _showNowPrice = !_showNowPrice),
      ],
    );
  }

  Widget button(String text, {VoidCallback? onPressed}) {
    return TextButton(
      onPressed: () {
        if (onPressed != null) {
          onPressed();
          setState(() {});
        }
      },
      style: TextButton.styleFrom(
        minimumSize: const Size(88, 44),
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(2.0)),
        ),
        backgroundColor: Colors.blue,
      ),
      child: Text(text, style: TextStyle(color: Colors.white)),
    );
  }

  void getData(String period) {
    // 可以翻墙使用方法1加载数据，不可以翻墙使用方法2加载数据，默认使用方法1加载最新数据
    // final Future<String> future = getChatDataFromInternet(period);
    final Future<String> future = getChatDataFromJson();
    future.then((String result) {
      solveChatData(result);
    }).catchError((_) {
      showLoading = false;
      setState(() {});
    });
  }

  // 获取火币数据，需要翻墙
  Future<String> getChatDataFromInternet(String? period) async {
    var url = 'https://api.huobi.br.com/market/history/kline?period=${period ?? '1day'}&size=300&symbol=btcusdt';
    late String result;
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      result = response.body;
    } else {
      debugPrint('Failed getting IP address');
    }
    return result;
  }

  // 如果你不能翻墙，可以使用这个方法加载数据
  Future<String> getChatDataFromJson() async {
    return rootBundle.loadString('assets/chatData.json');
  }

  void solveChatData(String result) {
    final Map parseJson = json.decode(result) as Map<dynamic, dynamic>;
    final list = parseJson['data'] as List<dynamic>;
    data = list
        .map((item) => KLineEntity.fromJson(item as Map<String, dynamic>))
        .toList()
        .reversed
        .toList()
        .cast<KLineEntity>();

    DataUtil.calculate(data!);
    showLoading = false;
    setState(() {});
  }
}