Flutter:fl_chart 曲线图

在这里插入图片描述

# 图表
fl_chart: ^0.69.0
  // 示例数据
  // prices = [1.05,1.05,1.05,1.051.05,1.05,1.05,1.05]
  // 资产曲线图
  Widget _buildAssetsCurve() {
    return buildLineChart(Get.context!, item.prices ?? [],item.increaseStr ?? '');
  }

  // 资产曲线图方法,参考CoinPage
  Widget buildLineChart(BuildContext context, List<dynamic> prices,String increaseStr) {
    List<FlSpot> spots = [];
    for (int i = 0; i < prices.length; i++) {
      final price = prices[i];
      if (price is num) {
        spots.add(FlSpot(i.toDouble(), price.toDouble()));
      }
    }
    double minY = spots.isNotEmpty ? spots.map((e) => e.y).reduce((a, b) => a < b ? a : b) : 0;
    double maxY = spots.isNotEmpty ? spots.map((e) => e.y).reduce((a, b) => a > b ? a : b) : 100;
    if ((maxY - minY).abs() < 1e-8) {
      minY = minY * 0.9;
      maxY = maxY * 1.1;
    } else {
      double padding = (maxY - minY) * 0.2;
      minY = minY - padding;
      maxY = maxY + padding;
    }
    return Container(
      padding: EdgeInsets.only(left: 10.w, right: 10.w, top: 0, bottom: 0),
      width: 200.w,
      height: 80.w,
      child: LineChart(
        LineChartData(
          minY: minY,
          maxY: maxY,
          lineBarsData: [
            LineChartBarData(
              spots: spots,
              isCurved: true,
              color: increaseStr.startsWith('-') == true ? AppTheme.colorRed : AppTheme.colorGreen,
              barWidth: 2,
              belowBarData: BarAreaData(
                show: true,
                color: increaseStr.startsWith('-') == true ? AppTheme.colorRed.withOpacity(0.2) : AppTheme.colorGreen.withOpacity(0.2),
              ),
              dotData: const FlDotData(show: false),
            ),
          ],
          lineTouchData: const LineTouchData(
            enabled: false,
          ),
          titlesData: const FlTitlesData(
            leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
            bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
            topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
            rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
          ),
          gridData: FlGridData(show: false),
          borderData: FlBorderData(show: false),
        ),
      ),
    );
  }

你可能感兴趣的:(Flutter:布局,组件,flutter)