Flutter中点击柱状图添加Tooltip或在柱内显示数值的方法

以下是针对你的分组柱状图，实现「点击显示Tooltip」和「柱子内显示数值」两种需求的具体修改方案：

方案一：点击柱子弹出带销售数值的Tooltip #

通过添加交互行为，实现点击柱子时显示包含销售数值的Tooltip：

@override
Widget build(BuildContext context) {
  return charts.BarChart(
    seriesList,
    animate: animate,
    barGroupingType: charts.BarGroupingType.grouped,
    // 添加交互行为
    behaviors: [
      // 点击柱子时选中对应数据系列
      charts.SelectNearest(),
      // 配置Tooltip显示销售数值
      charts.TooltipBehavior(
        formatter: (dynamic datum, dynamic measure, dynamic domain, dynamic series) {
          return '销量: ${(datum as OrdinalSales).sales}';
        },
        tooltipPosition: charts.TooltipPosition.auto,
      ),
    ],
  );
}

方案二：在柱子内部直接显示销售数值 #

通过配置系列标签和装饰器，让数值直接显示在柱子内部：

// 修改数据系列创建方法，添加标签访问器
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
  final mobileSalesData = [
    OrdinalSales('2014', 10),
    OrdinalSales('2015', 15),
    OrdinalSales('2016', 50),
    OrdinalSales('2017', 45),
  ];

  return [
    charts.Series<OrdinalSales, String>(
      id: 'Mobile',
      domainFn: (OrdinalSales sales, _) => sales.year,
      measureFn: (OrdinalSales sales, _) => sales.sales,
      data: mobileSalesData,
      // 指定要显示的数值内容
      labelAccessorFn: (OrdinalSales sales, _) => '${sales.sales}',
    ),
  ];
}

// 修改build方法，添加柱子标签装饰器
@override
Widget build(BuildContext context) {
  return charts.BarChart(
    seriesList,
    animate: animate,
    barGroupingType: charts.BarGroupingType.grouped,
    // 配置柱子内部标签样式
    barRendererDecorator: charts.BarLabelDecorator(
      labelPosition: charts.BarLabelPosition.inside,
      insideLabelStyleSpec: charts.TextStyleSpec(
        fontSize: 12,
        color: charts.MaterialPalette.white,
      ),
    ),
  );
}

完整整合代码 #

如果需要同时支持两种功能（点击Tooltip+柱子内显示数值），可以合并配置：

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class GroupedBarChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  GroupedBarChart(this.seriesList, {this.animate});

  factory GroupedBarChart.withSampleData() {
    return GroupedBarChart(
      _createSampleData(),
      animate: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return charts.BarChart(
      seriesList,
      animate: animate,
      barGroupingType: charts.BarGroupingType.grouped,
      // 柱子内显示数值的配置
      barRendererDecorator: charts.BarLabelDecorator(
        labelPosition: charts.BarLabelPosition.inside,
        insideLabelStyleSpec: charts.TextStyleSpec(
          fontSize: 12,
          color: charts.MaterialPalette.white,
        ),
      ),
      // 点击显示Tooltip的配置
      behaviors: [
        charts.SelectNearest(),
        charts.TooltipBehavior(
          formatter: (dynamic datum, dynamic measure, dynamic domain, dynamic series) {
            return '年份: $domain\n销量: ${(datum as OrdinalSales).sales}';
          },
        ),
      ],
    );
  }

  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final mobileSalesData = [
      OrdinalSales('2014', 10),
      OrdinalSales('2015', 15),
      OrdinalSales('2016', 50),
      OrdinalSales('2017', 45),
    ];

    return [
      charts.Series<OrdinalSales, String>(
        id: 'Mobile',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: mobileSalesData,
        labelAccessorFn: (OrdinalSales sales, _) => '${sales.sales}',
      ),
    ];
  }
}

class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

内容的提问来源于stack exchange，提问作者songa