Zenn
Closed11

(Flutter Web) fl_chart で複合グラフをつくりたい

Flutter
ndjndj

fl_chart で複合グラフをつくりたい

こういうやつ

ndjndj

とりあえず BarChart

class _BarChart extends StatelessWidget {
  const _BarChart();

  @override 
  Widget build(BuildContext context) {

    final List<BarChartGroupData> sample = List.generate(
      7, 
      (int i) {
        int x = i + 1;
        double toY = i * 10;

        return BarChartGroupData(
          barsSpace: 4,
          x: x,
          barRods: [
            BarChartRodData(
            toY: 160 + toY,
            color: Colors.red,
            width: 16,
            ),
            BarChartRodData(
              toY: 140 + toY,
              color: Colors.indigo,
              width: 16,
            ),
            BarChartRodData(
              toY: 120 + toY,
              color: Colors.green,
              width: 16,
            ),
            BarChartRodData(
              toY: 100 + toY,
              color: Colors.amber,
              width: 16,
            ),
          ]
        );
      }
    );

    return BarChart(
      BarChartData(
        maxY: 300,
        barTouchData: BarTouchData(
          enabled: false,
        ),
        titlesData: const FlTitlesData(
          show: false
        ),
        borderData: FlBorderData(
          show: false
        ),
        gridData: const FlGridData(
          show: false
        ),  
        barGroups: sample
      )
    );
  }
}
ndjndj

LineChart

class _LineChart extends StatelessWidget {
  const _LineChart();

  @override 
  Widget build(BuildContext context) {
    final List<FlSpot> spots = [
      FlSpot(1, 100),
      FlSpot(2, 150),
      FlSpot(3, 200),
      FlSpot(4, 150),
      FlSpot(5, 200),
      FlSpot(6, 150),
      FlSpot(7, 100),
    ];
    final List<LineChartBarData> sample = [
      LineChartBarData(
        color: Colors.purple,
        dotData: const FlDotData(
          show: false
        ),
        spots: spots,
      )
    ];

    return LineChart(
      LineChartData(
        maxY: 300,
        lineTouchData: const LineTouchData(
          enabled: false,
        ),
        titlesData: const FlTitlesData(
          show: false
        ),
        borderData: FlBorderData(
          show: false
        ),
        gridData: const FlGridData(
          show: false
        ),  
        lineBarsData: sample
      )
    );
  }
}
ndjndj

↑をただ

    return Stack(
      children: [
        _BarChart(),
        _LineChart()
      ],
    );

しただけだとY方向にあわない

ndjndj
  • デバイスの Width に合わせて BarChart どうしの margin がかわる
  • LineChart は x でこてい
このスクラップは5ヶ月前にクローズされました