使用Flutter的fl_chart包能否将柱状图与折线图合并为一个图表？

当然可以！fl_chart 提供了 CombinedChart 组件，专门用来实现多种图表类型的混合展示，完全能达到你想要的效果。

实现步骤 #

• 分别准备柱状图和折线图的数据源：
  • 柱状图用 BarChartGroupData 定义每组柱子的数据
  • 折线图用 LineChartBarData 定义折线的点数据
• 通过 CombinedChartData 把两类数据组合起来，传入 CombinedChart 组件即可

示例代码 #

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

class MixedChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: CombinedChart(
        CombinedChartData(
          barData: BarChartData(
            alignment: BarChartAlignment.spaceAround,
            groupsSpace: 10,
            barGroups: [
              BarChartGroupData(
                x: 0,
                barRods: [BarChartRodData(toY: 10, color: Colors.blue)],
              ),
              BarChartGroupData(
                x: 1,
                barRods: [BarChartRodData(toY: 15, color: Colors.blue)],
              ),
              BarChartGroupData(
                x: 2,
                barRods: [BarChartRodData(toY: 8, color: Colors.blue)],
              ),
              BarChartGroupData(
                x: 3,
                barRods: [BarChartRodData(toY: 20, color: Colors.blue)],
              ),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: (value, meta) {
                    return Text('${value.toInt()}');
                  },
                ),
              ),
            ),
          ),
          lineData: LineChartData(
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 12),
                  FlSpot(1, 18),
                  FlSpot(2, 5),
                  FlSpot(3, 22),
                ],
                isCurved: true,
                color: Colors.red,
                dotData: FlDotData(show: true),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义调整 #

你还可以根据需求：

• 调整柱状图的宽度、颜色，折线图的粗细、曲线平滑度
• 设置共享的坐标轴，确保两类数据的刻度对齐
• 添加图例区分不同图表类型
• 调整图表的padding、背景色等样式，让整体效果更贴近你的预期图

内容的提问来源于stack exchange，提问作者Matanyos. Antar