如何在 SfCartesianChart 中制作自定义工具提示？

Question

我有这样的工具提示：

但我想将其自定义为：

我怎样才能做到这一点？

这是我的代码：

void initState() {
    _tooltipBehavior = TooltipBehavior(
      enable: true,
      color: Colors.transparent,
      header: "",
      duration: 0,
      format: "point.y%\npoint.x",
      canShowMarker: false,
      textAlignment: ChartAlignment.center
      // builder: (data, point, series, pointIndex, seriesIndex) {
      //   return Container(
      //     child: Text("data: point.y"),
      //   );
      // },
    );
    super.initState();
  }

SfCartesianChart(
  plotAreaBorderWidth: 0, // X top line
  plotAreaBorderColor: Colors.white24,
  tooltipBehavior: _tooltipBehavior,
  primaryXAxis: DateTimeAxis(
    majorTickLines: const MajorTickLines(width: 0), // Little sticks below X line
    majorGridLines: const MajorGridLines(
      width: 0.5,
      color: Colors.transparent,
    ),
    axisLine: const AxisLine( // X bottom line
      color: Colors.white24,
      dashArray: <double>[5,5]
    ),
  ),
  primaryYAxis: NumericAxis(
    majorGridLines: const MajorGridLines(width: 1, color: Colors.white24, dashArray: <double>[5, 5]),
    majorTickLines: const MajorTickLines(width: 0), // Little sticks on left side
    axisLine: const AxisLine(
      color: Colors.transparent, // Y left line
      dashArray: <double>[5,5]
    ),
    minimum: 0,
    maximum: 100,
  ),
)

我遇到了 point.y 位移的错误，当我将鼠标移到蓝线下方时，它会显示 => point.y%。但是当我只在蓝线上移动时一切正常，它显示 54 美元。我该如何解决？

Answer 1

您可以按照开发人员的本教程了解如何自定义图表工具提示：

https://help.syncfusion.com/flutter/cartesian-charts/tooltip

你基本上需要使用TooltipBehavior的builder方法。

Answer 2

#Query 1：我该怎么做？

可以借助图表中的 TrackballBehavior 并使用其 builder 属性并显示可自定义的小部件来实现该要求。 TrackballBehavior 支持当前激活数据点的标记，也有线支持。因此，您可以在 markerSettings 属性的帮助下显示当前激活点的标记和线，并在 TrackballBehavior 的 tooltipAlignment 的帮助下放置自定义小部件。我们分享了下面的代码 sn-p 供您参考。

代码 SN-P：

import 'dart:math';
import 'package:intl/intl.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<ChartData> chartData;

  @override
  void initState() {
    chartData = [
      ChartData(DateTime(2022, 12, 01, 09, 12), 50),
      ChartData(DateTime(2022, 12, 01, 09, 13), 45),
      ChartData(DateTime(2022, 12, 01, 09, 14), 54),
      ChartData(DateTime(2022, 12, 01, 09, 15), 51),
      ChartData(DateTime(2022, 12, 01, 09, 16), 53),
      ChartData(DateTime(2022, 12, 01, 09, 17), 49),
      ChartData(DateTime(2022, 12, 01, 09, 18), 54),
      ChartData(DateTime(2022, 12, 01, 09, 19), 45),
      ChartData(DateTime(2022, 12, 01, 09, 20), 30),
      ChartData(DateTime(2022, 12, 01, 09, 21), 48),
      ChartData(DateTime(2022, 12, 01, 09, 22), 65),
      ChartData(DateTime(2022, 12, 01, 09, 23), 63),
      ChartData(DateTime(2022, 12, 01, 09, 24), 71),
      ChartData(DateTime(2022, 12, 01, 09, 25), 48),
      ChartData(DateTime(2022, 12, 01, 09, 26), 51),
      ChartData(DateTime(2022, 12, 01, 09, 27), 49),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfCartesianChart(
        trackballBehavior: TrackballBehavior(
            enable: true,
            markerSettings: const TrackballMarkerSettings(
                height: 10,
                width: 10,
                markerVisibility: TrackballVisibilityMode.visible,
                borderColor: Colors.black,
                borderWidth: 4,
                color: Colors.blue),
            activationMode: ActivationMode.singleTap,
            builder: (context, trackballDetails) {
              return SizedBox(
                height: 200,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "${trackballDetails.groupingModeInfo!.points[0].y}%",
                      textAlign: TextAlign.left,
                      style: const TextStyle(color: Colors.white, fontSize: 20),
                    ),
                    const Padding(padding: EdgeInsets.only(top: 5)),
                    Text(
                      DateFormat('hh:mm').format(
                          trackballDetails.groupingModeInfo!.points[0].x),
                      textAlign: TextAlign.left,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                    ),
                  ],
                ),
              );
            },
            tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
            tooltipAlignment: ChartAlignment.near),
        backgroundColor: Colors.black,
        plotAreaBorderWidth: 0, // X top line
        plotAreaBorderColor: Colors.white24,
        primaryXAxis: DateTimeAxis(
          majorTickLines:
              const MajorTickLines(width: 0), // Little sticks below X line
          majorGridLines: const MajorGridLines(
            width: 0.5,
            color: Colors.transparent,
          ),
          axisLine: const AxisLine(
              // X bottom line
              color: Colors.white24,
              dashArray: <double>[5, 5]),
        ),
        primaryYAxis: NumericAxis(
          interval: 50,
          majorGridLines: const MajorGridLines(
              width: 1, color: Colors.white24, dashArray: <double>[5, 5]),
          majorTickLines:
              const MajorTickLines(width: 0), // Little sticks on left side
          axisLine: const AxisLine(color: Colors.transparent, // Y left line
              dashArray: <double>[5, 5]),
          minimum: 0,
          maximum: 100,
        ),
        series: <ChartSeries<ChartData, DateTime>>[
          AreaSeries(
              borderColor: Colors.blue,
              borderWidth: 3,
              gradient: LinearGradient(colors: [
                Colors.blue.withOpacity(0.4),
                Colors.blue.withOpacity(0.2),
                Colors.blue.withOpacity(0.1)
              ], stops: const [
                0.1,
                0.3,
                0.6
              ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y)
        ],
      ),
    );
  }
}

class ChartData {
  final DateTime x;
  final num y;

  ChartData(this.x, this.y);
}

#Query 2：我遇到了 point.y 位移的错误，当我将鼠标移到蓝线下方时，它会显示 => point.y%。

根据提供的代码 sn-p，您在文本小部件中返回了带有字符串值 point.y 的文本小部件，这就是它显示 point.y 文本的原因。否则，它不会在工具提示中显示 point.y 值，我们也已确保这一点并且不会重现任何问题。