Attached development environment:

MacBook-Pro:~ xun$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): ✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 Darwin-x64, ✓ Locale zh-Hans) [✓] Android Toolchain develop for Android Devices (Android SDK version 30.0.1) [!]  Xcode - develop for iOS and macOS ! CocoaPods 1.9.1 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS Platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web ✓ Android Studio (Version 4.1) [✓] VS Code (version 1.55.2) [✓] Connected Device (2 available)Copy the code

Basic Integration

A line chart is a Widget and can be declared as a normal Widget:

LineChart(
              sampleData(),
            ),
Copy the code

The construction parameter of LineChart is a LineChartData, whose properties are as follows:

The attribute name describe The default value
lineBarsData The diagram shows an array of lines, each bit of which represents a line. []
betweenBarsData Fill the area between the two chart lines []
titlesData Coordinates, you can set headings in four directions FlTitlesData ()
axisTitleData The title FlAxisTitleData ()
extraLinesData Additional graphic details for horizontal and vertical lines
lineTouchData Touch interaction details LineTouchData ()
rangeAnnotations A range comment is displayed at the back of the chart. CheckRangeAnnotations RangeAnnotations ()
showingTooltipIndicators Displays tooltips according to the location (x) provided, as wellThe LineBarSpotThe list of []
gridData Grid data FlGridData ()
borderData Border data FlBorderData ()
minX Gets the minimum value x for the X-axis. If null, read the value from lineBars null
maxX Gets the maximum x of the X-axis. If null, read the value from lineBars null
minY Get the minimum y of the Y-axis, if null, read the value from lineBars null
maxY Gets the maximum y of the Y-axis. If null, read the value from lineBars null
clipData Crop the chart to the border (to prevent drawing beyond the border) FlClipData. None ()
backgroundColor The background color drawn at the back of the chart null 
LineChartData sampleData() {return LineChartData(//? Can I click lineTouchData: lineTouchData (enabled: enableLineTouchData,), //? GridData: FlGridData(show: showGridData,) axisTitleData: _buildFlAxisTitleData(), //? TitlesData: _buildTitles(), //? BorderData: _buildBorderData(), minX: 0, maxX: 14, maxY: 6, minY: 0, //? LineBarsData: linesBarDatas(),); }Copy the code

Two line configuration

Three lines are configured, so the array corresponding to lineBarsData has three elements.

/ /? LineChartBarData(//? Sampling point spots: FlSpot [FlSpot (1, 1), (3, 4), FlSpot (5, 1.8), FlSpot (7, 5), FlSpot (10, 2), FlSpot (12, 2.2), FlSpot (13, 1.8),], / /? IsCurved: isCurved1, // curveSmoothness: 0, colors: const [Color(0x444AF699),], // BarWidth: 4, //? IsStrokeCapRound: true, // Whether to display data point dotData: FlDotData(show: false,), //? AboveBarData: BarAreaData(show: showAboveBarData, colors: [const Color(0x444AF699),])Copy the code

Take a look at the LineChartBarData property:

The attribute name describe The default value
show Whether to show or hide lines True
spots To show the line data points, referFlSpot []
colors The line color, if multiple colors are provided, will be gradient [Colors.redAccent]
colorStops Gets the stop position of the gradient color,To learn more null
gradientFrom Determine the start of the gradient, with each number between 0 and 1.To read more Offset (0,0)
gradientTo Determine the end of the gradient. Each number should be between 0 and 1.To read more Offset (1,0)
barWidth Line width 2.0
isCurved Is it a smooth curve or a broken line false
curveSmoothness Radius of smoothness of curve Angle (effective when isCurved is true) 0.35
preventCurveOverShooting Check this to prevent overshoot when drawing curves at linear sequence pointsThe problem false
preventCurveOvershootingThreshold The threshold for applying the anti-overshoot algorithm 10.0
isStrokeCapRound Determine whether the bar line starts and ends with a right Angle or a round head false
belowBarData Fill in below the line, referenceBarAreaData BarAreaData
aboveBarData Fill above the line, see BarAreaData](Github.com/imaNNeoFigh…) BarAreaData
dotData Data point, referenceFlDotData FlDotData ()
showingIndicators Displays coordinates based on the supplied index []
dashArray Dashes offset and length of circular array. For example, the array[5, 10]This results in a dash 5 pixels long, followed by a blank 10 pixels long. The array[5, 10, 5]Will result in 5 pixel dashes, 10 pixel dashes, 5 pixel dashes, 5 pixel dashes, 10 pixel dashes, etc. Null
shadow Line shadows, see”Shadow”. Shadow ()
isStepLineChart If set to true, a chart that draws a line chart style is usedlineChartStepData. false
lineChartStepData Saves the data used to represent the step line graph and is only valid if [isStepChart] is true. LineChartStepData(a)

Three-border configuration

There is a general display switch for the four sides of the chart, which determines whether to show and hide all of them. If this switch is on, and you want to hide individual borders, you need to set transparent color.

/ /? FlBorderData _buildBorderData() {return FlBorderData(show: showBorderData, border: border (bottom: showBottomBorder ? BorderSide( color: Color(0xff4e4965), width: 4, ) : BorderSide( color: Colors.transparent, ), left: showLeftBorder ? BorderSide( color: Color(0xff4e4965), width: 2, ) : BorderSide( color: Colors.transparent, ), right: BorderSide( color: Colors.transparent, ), top: BorderSide( color: Colors.transparent, ), )); }Copy the code

FlBorderData corresponds to border information and has two parameters: show is the border shown and hidden, and border is the border data.

Four axis configuration

FlTitlesData can be configured with 4 axes, and there is also a master switch. If you want to display the axes, set it to true, and then configure the corresponding position of the data:

/ /? FlTitlesData _buildTitles() {return FlTitlesData(//? BottomTitles: _buildBottomTitle(), //? LeftTitles: _buildLeftTitle(),); }Copy the code

Each location corresponds to SideTitles, set as follows:

 SideTitles _buildLeftTitle() {
    return SideTitles(
      showTitles: showlLeftTitles,
      getTextStyles: (value) => const TextStyle(
        color: Color(0xff75729e),
        fontWeight: FontWeight.bold,
        fontSize: 14,
      ),
      getTitles: (value) {
        switch (value.toInt()) {
          case 1:
            return '1m';
          case 2:
            return '2m';
          case 3:
            return '3m';
          case 4:
            return '5m';
          case 5:
            return '6m';
        }
        return '';
      },
      margin: 8,
      reservedSize: 30,
    );
  }
Copy the code
The attribute name describe The default value
showTitles Determines whether to show or hide the title false
getTitles This function retrieves the title with a given value on the relevant axis. Do not touch it if you want to set the number formatter by displaying an indicator of large numbers. defaultGetTitle
reservedSize Reserved title space. If you set axisTitleData, leave space here otherwise it will overlap 22
textStyle Text attributesTextStyle the style to use for title text TextStyle(color: Colors.black, fontSize: 11)
margin Spacing of text and border 6
interval Interval several coordinates display null
rotateAngle Rotate the clockwise Angle of the title 0.0
checkToShowTitle Determines whether to display or not display the title at the provided value show all

5 Title Configuration

Headings are text headings displayed after the coordinate axes, one for each axis.

/ /? FlAxisTitleData _buildFlAxisTitleData() {return FlAxisTitleData(leftTitle: AxisTitle(titleText: "Side AxisTitle ", showTitle: showAxisLeftTitle), bottomTitle: AxisTitle(titleText:" bottomTitle ", showTitle: showAxisBottomTitle), }Copy the code

Six configuration touch

Copy the code
The attribute name describe The default value
enabled Whether touching is allowed true
touchTooltipData aLineTouchTooltipDataDetermines how to display the tooltip at the top of the touch point (represents what the tooltip bubble looks like) LineTouchTooltipData
getTouchedSpotIndicator Retrievable list of callbacksTouchedSpotIndicatorDataGiven a listLineBarSpotThe indicator used to display the touch points on defaultTouchedIndicators
touchSpotThreshold Threshold of touch accuracy 10
handleBuiltInTouches If you want built-in touch handling, set it to True (display tooltip bubbles and indicators at the location of the prompt) true
getTouchLineStart Controls the starting point of the line. The default value is the bottom of the chart defaultGetTouchLineStart
getTouchLineEnd End position of the control line, which is the contact point by default defaultGetTouchLineEnd
touchCallback Listen for this callback to retrieve the touch event that it providesLineTouchResponse null

Attach the source code