Flutter：如何在Syncfusion Spline Chart中显示多个Tooltip？

可以实现，根据你的期望效果，推荐以下两种方案：

方案一：固定显示每个点的"Tooltip"样式标签 #

这种方式会在每个数据标记点旁固定展示带框的数值，和你期望的视觉效果完全匹配，本质是用**数据标签（Data Label）**模拟Tooltip样式：

修改你的SplineSeries配置，添加dataLabelSettings：

SplineSeries<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData sales, _) => sales.x,
  yValueMapper: (ChartData sales, _) => sales.y,
  markerSettings: const MarkerSettings(isVisible: true),
  color: BaseColors.primaryBlueColor,
  name: 'High',
  // 配置数据标签模拟Tooltip
  dataLabelSettings: DataLabelSettings(
    isVisible: true,
    textStyle: const TextStyle(fontSize: 12, color: Colors.white),
    backgroundColor: BaseColors.primaryBlueColor,
    borderColor: Colors.white,
    borderWidth: 1,
    borderRadius: BorderRadius.circular(4),
    labelPosition: ChartDataLabelPosition.top, // 标签放在标记点上方
    // 自定义标签内容，显示带百分号的数值
    builder: (data, point, series, pointIndex, seriesIndex) {
      return Text('${data.y}%');
    },
  ),
),

方案二：hover触发显示多个关联点信息 #

如果你需要的是鼠标hover时显示多个点的Tooltip内容，可以通过自定义TooltipBehavior的builder来实现：

tooltipBehavior: TooltipBehavior(
  enable: true,
  // 自定义Tooltip内容，可展示多个点的数据
  builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.white,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: chartData.map((item) {
          return Text('${item.x}: ${item.y}%', style: const TextStyle(color: Colors.black));
        }).toList(),
      ),
    );
  },
),

完整修改后的代码示例（方案一） #

SfCartesianChart(
  plotAreaBorderWidth: 0,
  title: const ChartTitle(text: ''),
  primaryXAxis: const CategoryAxis(
    majorGridLines: MajorGridLines(width: 0),
  ),
  primaryYAxis: const NumericAxis(
    majorGridLines:
        MajorGridLines(width: 1, color: BaseColors.lightGreyColor),
    opposedPosition: true,
    maximum: 100,
    maximumLabels: 4,
    labelFormat: '{value}%',
    axisLine: AxisLine(width: 1),
  ),
  series: _getDefaultSplineSeries(chartData),
);
}

List<SplineSeries<ChartData, String>> _getDefaultSplineSeries(
    List<ChartData> chartData) {
  return <SplineSeries<ChartData, String>>[
    SplineSeries<ChartData, String>(
      dataSource: chartData,
      xValueMapper: (ChartData sales, _) => sales.x,
      yValueMapper: (ChartData sales, _) => sales.y,
      markerSettings: const MarkerSettings(isVisible: true),
      color: BaseColors.primaryBlueColor,
      name: 'High',
      dataLabelSettings: DataLabelSettings(
        isVisible: true,
        textStyle: const TextStyle(fontSize: 12, color: Colors.white),
        backgroundColor: BaseColors.primaryBlueColor,
        borderColor: Colors.white,
        borderWidth: 1,
        borderRadius: BorderRadius.circular(4),
        labelPosition: ChartDataLabelPosition.top,
        builder: (data, point, series, pointIndex, seriesIndex) {
          return Text('${data.y}%');
        },
      ),
    ),
  ];
}

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