Как показать линейный график из данных JSON, используя флаттер

Question

Я покажу линейную диаграмму из базы данных, используя datajson с флаттером. но ссылка, которую я могу использовать, это данные жесткого кода. Пожалуйста, помогите

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:charts_flutter/flutter.dart' as charts;

int dataTotal = 0;

class GrafikSpbj extends StatefulWidget {
  final List<charts.Series> seriesList;
  final bool animate;


  GrafikSpbj(this.seriesList, {this.animate});

  /// Creates a [LineChart] with sample data and no transition.
  factory GrafikSpbj.withSampleData() {
    return new GrafikSpbj(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }

  @override
  _GrafikSpbjState createState() => _GrafikSpbjState();

  /// Create one series with sample hard coded data.
  static List<charts.Series<LinearSales, int>> _createSampleData() {

    print(dataTotal);

    final desktopSalesData = [
      new LinearSales(0, 10),
      new LinearSales(1, 50),
      new LinearSales(2, 70),
      new LinearSales(3, 100),
    ];

    final tableSalesData = [
      new LinearSales(0, 20),
      new LinearSales(1, 40),
      new LinearSales(2, 80),
      new LinearSales(3, 100),
    ];

    return [
      new charts.Series<LinearSales, int>(
        id: 'Desktop',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: desktopSalesData,
      ),
      new charts.Series<LinearSales, int>(
        id: 'Tablet',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: tableSalesData,
      ),
    ];
  }
}

class _GrafikSpbjState extends State<GrafikSpbj> {

  List data;
  Timer timer;
  int jumlahData = 0;

  Future<List> _getData() async {
    final response = await http.get("xxxxxxxxxxxxx");

    setState(() {
      data = json.decode(response.body);
      jumlahData =data.length;
      print(data[0]['id_spbj']);
      print(data[0]['minggu_ke']);
      print(data[0]['hasil']);
      print(data[0]['target_grafik']);
    });

    return json.decode(response.body);
  }

  // makeRequest() async {
  //   var response = await http.get(
  //     'xxxxxxxxxxxxxxxxxxxxxxx',
  //     headers: {'Accept': 'application/json'},
  //   );

  //   setState(() {
  //     data = json.decode(response.body);
  //     jumlahData =data.length;
  //   });
  // }

  @override
  void initState() {
    _getData();
    dataTotal = jumlahData;
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Input Pelanggan hal 2"),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(
            width: 600.0,
            height: 250.0,
            child: new charts.NumericComboChart(widget.seriesList,
              animate: widget.animate,
              defaultRenderer: new charts.LineRendererConfig(),
              customSeriesRenderers: [
                new charts.PointRendererConfig(customRendererId: 'customPoint')
              ]),
          ),
          new Text("data"),
          new Text("data"),
          new Text("data")
        ],
      ),
    );
  }
}

/// Sample linear data type.
class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

значения

[{"id_spbj":"1","minggu_ke":"1","hasil":"13.4353337","target_grafik":"25.00"},{"id_spbj":"1","minggu_ke":"2","hasil":"28.2629147","target_grafik":"25.00"},{"id_spbj":"1","minggu_ke":"3","hasil":"85.3285762","target_grafik":"25.00"},{"id_spbj":"2","minggu_ke":"1","hasil":"32.0184122","target_grafik":"25.00"},{"id_spbj":"2","minggu_ke":"2","hasil":"53.5296934","target_grafik":"25.00"}]

Answer 1

Вы можете использовать библиотеку FL_chart во флаттере, где вы рисуете все типы графиков. пожалуйста, найдите руководство по использованию FL_Chart