选择行为在charts_flutter中变得奇怪

Question

我正在用Flutter和包charts_flutter(已存档)构建一个应用程序。而一个问题的出现让我很困惑。选择行为并没有像我期望的那样起作用散点和线选择不在垂直线上我使用散点图折线图(图表链接)，但问题是，当我选择一个散点事件点时，它选择的是一个直线点，它不是离散点最近的点。这是我的代码

SizedBox(
height: 240,
child: charts.TimeSeriesChart(
[
charts.Series<num, DateTime>(
id: 'signal2Chart',
domainFn: (_, int? index) {
if (index != null) {
final DateTime date = datas!.time[index].beginningOfDay;
return date;
} else {
throw Exception("Chart index null");
}
},
measureFn: (num o, _) {
return o;
},
seriesColor: charts.ColorUtil.fromDartColor(
widget.stockModel?.stockData.color ??
AppColors.semantic_02),
data: datas!.c,
)
..setAttribute(charts.rendererIdKey, 'scatterChart')
..setAttribute(
charts.measureAxisIdKey, "secondaryMeasureAxisId"),
if (widget.data?.cBUYDATE != null)
charts.Series<TopSignalDetailModel, DateTime>(
id: 'Annotation Series 2',
colorFn: (_, __) =>
charts.MaterialPalette.green.shadeDefault,
domainFn: (TopSignalDetailModel event, _) =>
event.cBUYDATE!,
measureFn: (TopSignalDetailModel event, __) {
final int index = datas!.time.indexWhere((element) {
final int compare =
element.beginningOfDay.compareTo(event.cBUYDATE!);
switch (compare) {
case 0:
return true;
default:
return false;
}
});
return index > -1
? datas!.o.elementAt(index)
: event.cBUYPRICE;
},
radiusPxFn: (_, __) => 5.0,
data: [widget.data!],
)
..setAttribute(charts.boundsLineRadiusPxKey, 3.5)
..setAttribute(
charts.measureAxisIdKey, "secondaryMeasureAxisId"),
],
animate: false,
layoutConfig: charts.LayoutConfig(
bottomMarginSpec: charts.MarginSpec.defaultSpec,
leftMarginSpec: charts.MarginSpec.defaultSpec,
rightMarginSpec: charts.MarginSpec.defaultSpec,
topMarginSpec: charts.MarginSpec.defaultSpec,
),
domainAxis: charts.DateTimeAxisSpec(
tickFormatterSpec:
charts.BasicDateTimeTickFormatterSpec.fromDateFormat(
TimeUtilities.dateMonthTimeFormat),
tickProviderSpec: const charts.AutoDateTimeTickProviderSpec(),
showAxisLine: true,
// viewport: charts.NumericExtents(minX, maxX),
renderSpec: const charts.GridlineRendererSpec(
axisLineStyle: charts.LineStyleSpec(
dashPattern: [4],
thickness: 0,
color: charts.Color(r: 74, g: 85, b: 104),
),
labelStyle: charts.TextStyleSpec(fontSize: 9),
lineStyle: charts.LineStyleSpec(dashPattern: [4]))),
primaryMeasureAxis: const charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: charts.NoneRenderSpec(),
),
secondaryMeasureAxis: const charts.NumericAxisSpec(
showAxisLine: true,
tickProviderSpec: charts.BasicNumericTickProviderSpec(
zeroBound: false,
),
renderSpec: charts.GridlineRendererSpec(
axisLineStyle: charts.LineStyleSpec(
dashPattern: [4],
thickness: 0,
color: charts.Color(r: 74, g: 85, b: 104),
),
labelStyle: charts.TextStyleSpec(fontSize: 9),
lineStyle: charts.LineStyleSpec(dashPattern: [4]),
),
),
defaultRenderer: charts.PointRendererConfig(),
customSeriesRenderers: [
charts.LineRendererConfig(
smoothLine: true,
includeArea: true,
// includePoints: true,
customRendererId: 'scatterChart',
),
],
behaviors: [
charts.LinePointHighlighter(
symbolRenderer: CustomTooltipRenderer(_ToolTipMgr.instance,
size: MediaQuery.of(context).size,
fontSize: 10) // add this line in behaviours,
),
],
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (charts.SelectionModel model) {
if (model.hasDatumSelection) {
final List<String> data = [];
print(model.selectedDatum.length);
if (model.selectedDatum.length > 1) {
late TopSignalDetailModel topSignalStockModel;
late num price;
for (var element in model.selectedDatum) {
print(element.datum);
if (element.datum is TopSignalDetailModel) {
topSignalStockModel = element.datum;
} else if (element.datum is num) {
price = element.datum;
}
}
data.add(
"Ngày ${TimeUtilities.commonTimeFormat.format(topSignalStockModel.cBUYDATE!)}");
data.add("Giá mua ${topSignalStockModel.cBUYPRICE}");
data.add("Giá $price");
} else {
final index = model.selectedDatum.first.index ?? 0;
data.add(
"Ngày ${TimeUtilities.commonTimeFormat.format(datas!.time.elementAt(index))}");
data.add("Giá ${model.selectedDatum.first.datum}");
}
_ToolTipMgr.instance.setData(data);
} else {
_ToolTipMgr.instance.setData([]);
}
},
),
],
),
),

下面是我的图表，当我包括点在直线上。在事件的正下方有一个点，但没有被选中。带点渲染的直线代码运行时没有错误抛出，所以我无法找出我的代码发生了什么。我的医生在这里颤振医生

谁能给我找个解决办法吗?对不起，如果我的英语不懂。

Answer 1

似乎选择行为的问题是由于您正在使用散点图的自定义渲染器引起的，该渲染器与您添加到图表中的LinePointHighlighter行为不能正常工作。

要解决此问题，您可以尝试删除自定义渲染器并使用散点图的默认渲染器，这应该与LinePointHighlighter行为一起正常工作。下面是一个如何修改代码以使用默认渲染器的示例:

SizedBox(
height: 240,
child: charts.TimeSeriesChart(
[
charts.Series<num, DateTime>(
id: 'signal2Chart',
domainFn: (_, int? index) {
if (index != null) {
final DateTime date = datas!.time[index].beginningOfDay;
return date;
} else {
throw Exception("Chart index null");
}
},
measureFn: (num o, _) {
return o;
},
seriesColor: charts.ColorUtil.fromDartColor(
widget.stockModel?.stockData.color ??
AppColors.semantic_02),
data: datas!.c,
),
if (widget.data?.cBUYDATE != null)
charts.Series<TopSignalDetailModel, DateTime>(
id: 'Annotation Series 2',
colorFn: (_, __) =>
charts.MaterialPalette.green.shadeDefault,
domainFn: (TopSignalDetailModel event, _) =>
event.cBUYDATE!,
measureFn: (TopSignalDetailModel event, __) {
final int index = datas!.time.indexWhere((element) {
final int compare =
element.beginningOfDay.compareTo(event.cBUYDATE!);
switch (compare) {
case 0:
return true;
default:
return false;
}
});
return index > -1
? datas!.o.elementAt(index)
: event.cBUYPRICE;
},
radiusPxFn: (_, __) => 5.0,
data: [widget.data!],
)
..setAttribute(charts.boundsLineRadiusPxKey, 3.5)
..setAttribute(
charts.measureAxisIdKey, "secondaryMeasureAxisId"),
],
animate: false,
layoutConfig: charts.LayoutConfig(
bottomMarginSpec: charts.MarginSpec.defaultSpec,
leftMarginSpec: charts.MarginSpec.defaultSpec,
rightMarginSpec: charts.MarginSpec.defaultSpec,
topMarginSpec: charts.MarginSpec.defaultSpec,
),
domainAxis: charts.DateTimeAxisSpec(
tickFormatterSpec:
charts.BasicDateTimeTickFormatterSpec.fromDateFormat(
TimeUtilities.dateMonthTimeFormat),
tickProviderSpec: const charts.AutoDateTimeTickProviderSpec(),
showAxisLine: true,
// viewport: charts.NumericExtents(minX, maxX),
renderSpec: const charts.GridlineRendererSpec(
axisLineStyle: charts.LineStyleSpec(
dashPattern: [4],
thickness: 0,
color: charts.Color(r: 74, g: 85, b: 104),
),
labelStyle: charts.TextStyleSpec(fontSize: 9),
lineStyle: charts.LineStyleSpec(dashPattern: [4]))),
primaryMeasureAxis: const charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: charts.NoneRenderSpec(),
),
secondaryMeasureAxis: const charts.NumericAxisSpec(
showAxisLine: true,
tickProviderSpec: charts.BasicNumericTickProviderSpec(
zeroBound: false,
),
renderSpec: charts.GridlineRendererSpec(
axisLineStyle: charts.LineStyleSpec(
dashPattern: [4],