Rev.

Borrowing from flutter_k_chart

In the company’s project, k-line and time-sharing line of stock class were involved. Flutter_k_chart was originally used, but due to the style and data problems, I decided to draw one from scratch.

Both mobile and WEB terminals are supported. Existing indicators include MACD, KDJ, BOLL,

Without further ado. The above first

figure

Click K line graph, VOL window to switch indicators.

HOW TO USE

The demo address

Github.com/GitHubYhb/H…

demo

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:HBLineChart/hb_kline_chart/hb_chart_data_util.dart';
import 'package:HBLineChart/hb_kline_chart/hb_k_line_chart.dart';
import 'package:HBLineChart/hb_kline_chart/hb_minute_line_chart.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HBLineChart Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  List datas = [];
  List klineDatas = [];

  @override
  void initState() {
    // getData();
    getMockMinuteData();
    getMockKlineData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Component test"),
      ),
      body: ListView(
        children: <Widget>[
          HBMinuteLineChart(datas: datas),
          HBKLineChart(datas: klineDatas,)
        ],
      ),
    );
  }

  getMockMinuteData() {
    rootBundle
        .loadString('lib/hb_kline_chart/mock_data/minute_line.json')
        .then((result) {
      List dataList = jsonDecode(result);
      List newData = [];
      double maxPrice = 0, minPrice = double.infinity;
      double sumPirce = 0;
      double avePirce = 0;
      int maxv = 0;
      for (var i = 0; i < dataList.length; i++) {
        double prePrice =
            HBDataUtil.valueToNum(i == 0 ? "0" : dataList[i - 1]["price"])
                .toDouble();
        double price = HBDataUtil.valueToNum(dataList[i]["price"]).toDouble();
        int vol = HBDataUtil.valueToNum(dataList[i]["vol"]).toInt(); // // ups/downs bool upDown = price > prePrice; sumPirce += price; avePirce = sumPirce / (i + 1);if (price > maxPrice) {
          maxPrice = price;
        }
        if (price < minPrice) {
          minPrice = price;
        }
        if (vol > maxv) {
          maxv = vol;
        }
        Map m = {
          "price": price,
          "vol": vol,
          "time": dataList[i]["time"]."upDown": upDown,
          "ave": avePirce
        };
        newData.add(m);
      }
      datas = newData;
      setState(() {});
    });
  }

  getMockKlineData() async {
    rootBundle
        .loadString('lib/hb_kline_chart/mock_data/k_line.json')
        .then((result) {
      List dataList = jsonDecode(result);
      List data = [];
      for (var i = 0; i < dataList.length; i++) {
        Map m = dataList[I];
        Map newMap = {
          "open": HBDataUtil.valueToNum(m["open"]).toDouble(),
          "high": HBDataUtil.valueToNum(m["high"]).toDouble(),
          "low": HBDataUtil.valueToNum(m["low"]).toDouble(),
          "close": HBDataUtil.valueToNum(m["close"]).toDouble(),
          "vol": HBDataUtil.valueToNum(m["vol"]).toDouble(),
          "date": m["date"]}; data.add(newMap); } klineDatas = data; Hbdatautil. calculate(klineDatas);setState(() {}); }); }}Copy the code

data

Time-sharing wire

[{"price": 4542,
        "vol": 49722,
        "time": "PM"
    },
    {
        "price": 4540,
        "vol": 26100,
        "time": "20:01"},]Copy the code

---

Important note:

The timesharing needs to be in advance/lib/hb_chart_config.dartSet the overall lengthlineChartCountOtherwise, display errors may occur.

K line

[{"open": "270.31"."high": "272.38"."low": "269.95"."close": "271.89"."vol": "66164"."date": "20170117"
    },
    {
        "open": "272.59"."high": "272.59"."low": "270.8"."close": "270.98"."vol": "71134"."date": "20170118"},]Copy the code

UI

Dart has various colors, widths, lengths, and so on.

import 'package:flutter/material.dart'; Int lineChartCount = 781; Double colMaxWidth = 5; // Double candleSpace = 10; // Double candleWidth = 8.5; // Double candleLineWidth = 1.5; TimePriceTextColor = color.white; // Long click on the background Color timePriceMarkColor = color.blue; // Color = Color. Red; // drop Color dnColor = color.green; // Double crossLineWidth = 0.5; // crossLineColor = color.black; // dotColor = color.red; // aveColor = Colors. Purple; // currentPriceColor = color.black87; // avePriceColor = Colors. Brown; // kValue1Color = color.brown; Color kValue2Color = Colors.blue; Color kValue3Color = Colors.purple; Double leftFontSize = 12.0; Double topFontSize = 12.0; Double bottomFontSize = 10.0;Copy the code