Flutter – Как получить всплывающие подсказки Mutliple на диаграмме SPLine?
Есть ли способ показать несколько всплывающих подсказок на одной линейной диаграмме с помощью сплайн-диаграммы синхронизации? Я прилагаю ожидаемый результат, например, как я хочу и что получаю.
Ниже приведен мой фрагмент кода.
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),
tooltipBehavior: TooltipBehavior(enable: true),
);
}
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',
),
];
}
Мне нужен приведенный выше результат.
Ответы 1
Вы можете достичь своего требования, используя аннотации в SfCartesianChart. Используя аннотации, вы можете отображать несколько виджетов в области графика. Вы можете получить информацию о касании, используя обратный вызов onPointTap в SplineSeries. Это позволит вам сохранить индексы x и y точки касания из аргументов ChartPointDetails. Затем вы можете использовать индексы точек касания для x и y в CartesianChartAnnotation для отображения виджета. Вы также можете настроить выравнивание с помощью свойств HorizontalAlignment иverterAlignment из CartesianChartAnnotation. Мы предоставили вам фрагмент кода, запись экрана, образец и ссылку на документацию по руководству пользователя. Вы можете изменить образец в соответствии с вашими потребностями.
Ю.Г. Ссылка,
https://help.syncfusion.com/flutter/cartesian-charts/annotations#positioning-the-annotation
https://help.syncfusion.com/flutter/cartesian-charts/annotations#alignment-of-annotation
Фрагмент кода:
SfCartesianChart(
annotations: _buildAnnotations(),
primaryXAxis: CategoryAxis(),
primaryYAxis: NumericAxis(),
series: <CartesianSeries<ChartSampleData, String>>[
SplineSeries<ChartSampleData, String>(
dataSource: data,
xValueMapper: (ChartSampleData sales, _) => sales.year,
yValueMapper: (ChartSampleData sales, _) => sales.sales,
markerSettings: const MarkerSettings(
isVisible: true,
),
onPointTap: (ChartPointDetails details) {
setState(() {
if (positions.length < 5) {
positions.add({
'x': details.dataPoints![details.pointIndex!].x,
'y': details.dataPoints![details.pointIndex!].y,
});
}
});
},
),
],
),
List<CartesianChartAnnotation> _buildAnnotations() {
List<CartesianChartAnnotation> annotations = [];
for (int i = 0; i < positions.length; i++) {
annotations.add(
CartesianChartAnnotation(
region: AnnotationRegion.plotArea,
widget: const Icon(
Icons.circle_rounded,
size: 40,
color: Colors.green,
),
coordinateUnit: CoordinateUnit.point,
x: positions[i]['x'],
y: positions[i]['y'],
),
);
}
return annotations;
}