charts_flutter 如何修改柱状图的默认选中颜色

你遇到的深色叠加遮罩是DomainHighlighter行为的默认效果，可通过两种方案实现自定义选中颜色： #

方案一：完全自定义选中颜色（无叠加遮罩，最灵活） #

步骤1：移除默认的DomainHighlighter配置 #

删除behaviors中的charts.DomainHighlighter()，避免默认遮罩干扰自定义颜色。

步骤2：声明变量存储选中状态 #

// 以你使用的时间类型domain为例
DateTime? _selectedDomain;

步骤3：修改选中监听逻辑，同步更新选中状态 #

selectionModels: [
  charts.SelectionModelConfig(
    type: charts.SelectionModelType.info,            
    changedListener: (model) {              
      if (model.selectedDatum.isNotEmpty) {
        _selectedDomain = model.selectedDatum.first.datum.time;
        // 状态变更后刷新UI
        setState(() {});
        print(model.selectedDatum.first.datum.time);
      } else {
        // 取消选中时清空状态
        if(_selectedDomain != null) {
          _selectedDomain = null;
          setState(() {});
        }
      }
    },
  ),
],

步骤4：在Series的colorFn中根据选中状态返回对应颜色 #

charts.Series<你的数据类, DateTime>(
  id: 'barSeries',
  domainFn: (data, _) => data.time,
  measureFn: (data, _) => data.value,
  colorFn: (data, _) {
    // 选中状态返回自定义颜色
    if(data.time == _selectedDomain) {
      return charts.MaterialPalette.green.shadeDefault;
    }
    // 普通状态返回默认颜色
    return charts.MaterialPalette.blue.shadeDefault;
  },
  data: yourDataList,
)

方案二：仅修改默认遮罩样式 #

如果不需要完全自定义选中颜色，只想调整默认叠加遮罩的颜色和透明度，直接配置DomainHighlighter的color参数即可：

behaviors: [
  charts.SelectNearest(),
  // 示例：设置遮罩为30%透明度的白色，替换默认深色遮罩，透明度取值范围0-255
  charts.DomainHighlighter(
    color: charts.Color(r: 255, g: 255, b: 255, a: 76),
  )
],

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