Flutter实战-折线图(fl_chart)

1-引入依赖

fl_chart: ^0.35.0  # 折线图

2-源码

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(home: LineChartSample2(),)
  );
}

class LineChartSample2 extends StatefulWidget {
  @override
  _LineChartSample2State createState() => _LineChartSample2State();
}

class _LineChartSample2State extends State<LineChartSample2> {
  

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 40),
      child: Column(children: [
        Container(
          height: 400,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              const SizedBox(width: 10,),
              SizedBox(
                width: 400,
                height: 400,
                child:  Stack(
                  children: <Widget>[
                    Container(
                      width: 400,
                      height: 400,
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(18),
                          ),
                          color: Color.fromRGBO(124, 124, 126, 1)),
                      child: Padding(
                        padding: const EdgeInsets.all(40),
                        child: LineChart(
                          mainData(),
                        ),
                      ),
                    ),
                    const Positioned(
                      top: 20,
                      left: 20,
                      child: Text(
                        '访问量',
                        style: TextStyle(
                            fontSize: 12, color: Colors.white,decoration: TextDecoration.none),
                      ),
                    )
                  ],
                ),
              ),
            ],
          )
        ),
      ]),
    );
  }
  LineChartData mainData() {
    return LineChartData(
      // 网格自定义 -- gridData
      gridData: FlGridData(
        // show -- 是否显示网格线
        show: false, 
        //drawVerticalLine -- 是否显示垂直方向的网格线
        drawVerticalLine: false,         
      ),
      // titlesData -- 自定义x,y轴的坐标
      titlesData: FlTitlesData(
        // show -- 是否显示x,y轴的坐标标题
        show: true,
        // bottomTitles -- 定义x轴的标题
        bottomTitles: SideTitles(
          showTitles: false,
          // reservedSize: 22,
          // getTextStyles: (value) =>
          // const TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 16),
          // getTitles: (value) {
          //   if(value.toInt()%2==0){
          //     return value.toInt().toString()+'月';
          //   }
          //   return '';
          // },
          // margin: 8,
        ),
        // leftTitles -- 定义y轴的坐标标题
        leftTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      // borderData -- FlBorderData来设置边框的大小和颜色
      borderData:
      FlBorderData(show: false, border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 0, // x轴的起点
      maxX: 11, // x轴的终点
      minY: 0, // y轴的起点
      maxY: 6, // y轴的终点
      lineBarsData:linesBarData1(), // lineBarsData -- 对折线进行自定义
      lineTouchData: LineTouchData(
        touchTooltipData: LineTouchTooltipData(
          tooltipBgColor: Colors.amber,          
        )
      )
    );
  }
  List<LineChartBarData> linesBarData1() {
    final LineChartBarData lineChartBarData1 = LineChartBarData(
      // 设置各点的横纵坐标
      spots: [
        FlSpot(0, 3),
        FlSpot(2.6, 2),
        FlSpot(4.9, 5),
        FlSpot(6.8, 3.1),
        FlSpot(8, 4),
        FlSpot(9.5, 3),
        FlSpot(11, 4),
      ],
      // 是否绘制成曲线
      isCurved: true,
      // 曲线的颜色
      colors:[const Color.fromRGBO(255, 255, 255, 1)] ,
      // 曲线的宽度
      barWidth: 2,
      // 确定线帽的形状
      isStrokeCapRound: true,
      // 显示结点
      dotData: FlDotData(
        show: false,
      ),
      // 折线图向下充满颜色
      belowBarData: BarAreaData(
        show: true,
        colors: [
          Color.fromRGBO(255, 255, 255, 0.7),
          Color.fromRGBO(255, 255, 255, 0),
        ],
        gradientColorStops: [0.0, 1.0],
        gradientFrom: const Offset(1,0),//纵向渐变
        gradientTo: const Offset(1,1),
      ),      
    );
    return [lineChartBarData1];
  }
}

运行效果

fl_chart条形图:Flutter实战 -- fl_chart(条形图)-CSDN博客