In this paper, a series of

  • Yang Xiao Yang share on Friday
  • Flutter technology

In the actual development process, too many business modules are data visualization, and there are many diagrams. I personally feel that it takes too long for one module. So far as I am concerned, there is no support like Echars on the Web side in the Flutter family. Also known as line charts, which can be divided into line charts, curves or double curves. That next when listen to a story same….

The story begins

In fact, among the many plug-ins for the chart, as you can see below,

It would be nice to have a well-documented package for a plugin, but there is a chart library for Flutter in the Google repository. Although not well documented yet, I personally feel that Flutter is the best thing to get started with

Story process

When we have a need to use graphs to process data, if the UI is relatively simple, then the official maintenance plugin is perfect. However, I don’t think it has been updated for a while, and the latest version is still available

  • Version V0.8.1

First of all, let’s look at these

  • Google’s official Library of Flutter charts
  • Pub The address of the packet
  • It’s like a gallery of what the charts look like

There are actually two ways to implement effects in this chart library

Methods a

Through the official example, when called

return Container(height: height, child: SimpleLineChart.withSampleData());
Copy the code

In the form of the point method, which is also used in the example, for example, the line graph

/// Example of a simple line chart.
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SimpleLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

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

  /// Creates a [LineChart] with sample data and no transition.
  factory SimpleLineChart.withSampleData() {
    return new SimpleLineChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,); } _onSelectionChanged(charts.SelectionModel model) {final selectedDatum = model.selectedDatum;
    print(selectedDatum.first.datum.year);
    print(selectedDatum.first.datum.sales);
    print(selectedDatum.first.series.displayName);
  }

  @override
  Widget build(BuildContext context) {
    return new charts.LineChart(
      seriesList,
      animate: animate,
      defaultRenderer: charts.LineRendererConfig(
        // The configuration of line drawing
        includeArea: true,
        includePoints: true,
        includeLine: true,
        stacked: false,
      ),
      domainAxis: charts.NumericAxisSpec(
        // // Spindle configuration
        // tickFormatterSpec: DomainFormatterSpec(
        // widget.daterange), // Format the tick value, where num is converted to String
        renderSpec: charts.SmallTickRendererSpec(
          // The configuration of the spindle drawing
          tickLengthPx: 0.// The scale marks the length of the highlight
          labelOffsetFromAxisPx: 12.// Scale text distance from the axis of the displacement
          labelStyle: charts.TextStyleSpec(
              // The scale text style
              // color: ChartUtil.getChartColor(HColors.lightGrey),
              // fontSize: HFontSizes.smaller.toInt(),
              ),
          axisLineStyle: charts.LineStyleSpec(
              // Axis style
              // color: ChartUtil.getChartColor(ChartUtil.lightBlue),
              ),
        ),
        tickProviderSpec: charts.BasicNumericTickProviderSpec(
          // Axis calibration configuration
          dataIsInWholeNumbers: false.// desiredTickCount: widget.data.length, // expects to display several scales
        ),
      ),
      primaryMeasureAxis: charts.NumericAxisSpec(
        // Cross axis configuration, the parameters refer to the spindle configuration
        showAxisLine: false.// Display axis
        // tickFormatterSpec: MeasureFormatterSpec(),
        tickProviderSpec: charts.BasicNumericTickProviderSpec(
          dataIsInWholeNumbers: false,
          desiredTickCount: 4,
        ),
        renderSpec: charts.GridlineRendererSpec(
          // Cross the axis calibration horizontal lines
          tickLengthPx: 0,
          labelOffsetFromAxisPx: 12,
          labelStyle: charts.TextStyleSpec(
              // color: ChartUtil.getChartColor(HColors.lightGrey),
              // fontSize: HFontSizes.smaller.toInt(),
              ),
          lineStyle: charts.LineStyleSpec(
              // color: ChartUtil.getChartColor(ChartUtil.lightBlue),
              ),
          axisLineStyle: charts.LineStyleSpec(
              // color: ChartUtil.getChartColor(ChartUtil.lightBlue),
              ),
        ),
      ),
      selectionModels: [
        // Set the click selected event
        charts.SelectionModelConfig(
          type: charts.SelectionModelType.info,
          changedListener: _onSelectionChanged,
        )
      ],
      behaviors: [
        charts.InitialSelection(selectedDataConfig: [
          // Set it to default
          charts.SeriesDatumConfig<num> ('LineChart'.2)]),],); }/// Create one series with sample hard coded data.
  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final data = [
      new LinearSales(0.5),
      new LinearSales(1.25),
      new LinearSales(2.100),
      new LinearSales(3.75)];return [
      new charts.Series<LinearSales, int>(
        id: 'Sales', colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, domainFn: (LinearSales sales, _) => sales.year, measureFn: (LinearSales sales, _) => sales.sales, data: data, ) ]; }}/// Sample linear data type.
class LinearSales {
  final int year;
  final int sales;

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

Copy the code

The above code contains custom parts that I will sync to the warehouse portal

Way 2

This is done by simply passing in the configuration items required by the different charts


 Container(
            width: double.infinity,
            height: 200.0,
            child: charts.BarChart(
              // Get the data passed in by the following
              ChartFlutterBean.createSampleData(),
              // Config items, and set the functions that fire
              selectionModels: [
                charts.SelectionModelConfig(
                  type: charts.SelectionModelType.info,
                  changedListener: _onSelectionChanged,
                )
              ],
            ),
Copy the code

The core part of it is click events, which means whether it’s a bar graph, I recommend looking at my other article, which I shared with you about graphs, d click events are in the selectionModels, but we can’t write click events like we normally do

We are going to have a look at the source code click charts. SelectionModelConfig




import 'package:meta/meta.dart' show immutable;

import 'package:charts_common/common.dart' as common;

@immutable
class SelectionModelConfig<D> {
  final common.SelectionModelType type;

  /// Listens for change in selection.
  final common.SelectionModelListener<D> changedListener;

  /// Listens anytime update selection is called.
  final common.SelectionModelListener<D> updatedListener;

  SelectionModelConfig(
      {this.type = common.SelectionModelType.info,
      this.changedListener,
      this.updatedListener});
}

Copy the code

We can see that there are two events, and then we can get the value of the event

 _onSelectionChanged(charts.SelectionModel model) {
    final selectedDatum = model.selectedDatum;
    print(selectedDatum.first.datum.year);
    print(selectedDatum.first.datum.sales);
    print(selectedDatum.first.series.displayName);
  }

Copy the code

The story ends

Thank you so much for reading this, it’s been a really fun day,

Special thanks to

  • Seek friends to upgrade the road
  • Tell no

Although the article is here, your fate has just begun