Thursday, September 28, 2023

Flutter chart library contains depth charts supporting various indicators and zooming

A Huobi-like flutter chart library contains depth charts, supporting various indicators and zooming, panning and other operations.

Demo v0.1.0

screens

chart_imge
depth_image
image1

Simple use case

Add dependency in pubspec.yaml

The data for this project comes from Huobi openApi.
Huobi’s interface may need to be turned over. After the interface fails, the local json will be loaded.
Since the project is not well packaged, it is recommended to use the local method.

//Local import method
dependencies:
  flutter_k_chart:
    path: 项目路径

2.在布局文件中添加

import 'package:flutter_k_chart/flutter_k_chart.dart';
....
Container(
  height: 450,
  width: double.infinity,
  child: KChartWidget(
    datas,//data
    isLine: isLine,//Whether to display a line chart
    mainState: _mainState,//Control the main view indicator line
    secondaryState: _secondaryState,//Control the indicator line of the secondary view
    volState: VolState.VOL,//Control volume indicator line
    fractionDigits: 4,//Retain decimal places
  ),
 )
 
 //Depth map use
 Container(
   height: 230,
   width: double.infinity,
   child: DepthChart(_bids, _asks),
 )         

3.Modify the style

The chart style can be modified in chart_style.dart

4.Data processing

//After the interface gets the data, calculate the data
DataUtil.calculate(datas);
//Update the last data
DataUtil.updateLastData(datas);
//adding data
DataUtil.addLastData(datas,kLineEntity);