我的工具提示如下所示:
但我想将其自定义为:
我该怎么做？
这是我的代码:
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 美元。我该如何解决这个问题？
最佳答案
#查询 1:我该如何执行此操作？
借助TrackballBehavior可以实现该要求在图表中并使用其 builder属性并显示可定制的小部件。 TrackballBehavior支持当前激活的数据点的标记，并且也有线条支持。因此，您可以在 markerSettings 的帮助下显示当前激活点的标记和线条。属性并在 tooltipAlignment 的帮助下放置自定义小部件。的TrackballBehavior 。我们分享了下面的代码片段供您引用。
代码片段:
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%。
根据提供的代码片段，您已在文本小部件内返回了带有字符串值 point.y 的文本小部件，这就是它显示 point.y 文本的原因。否则，它不会在工具提示中显示 point.y 值，我们也确保了这一点并且不会重现任何问题。
关于flutter - 如何在SfCartesianChart中制作自定义工具提示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74638400/