我正在用Flutter构建一个应用程序,并打包图表_flutter(已经存档)。一个问题出现让我困惑。选择行为不像我期望的那样工作Scatter point and line selection not in a vertical line我使用散点图折线图(chart link)但问题发生了,当我选择一个分散事件的点时,它选择了一个直线上的点,并且它不是离分散点最近的点。
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([]);
}
},
),
],
),
),
下面是我的图表,当我包括点在行中。有一个点下面的事件,但没有选择。Line with point render代码运行没有错误抛出,所以我不能找出发生了什么事,我的代码。这里我的Flutter医生Flutter doctor
谁能给我一个解决的办法。如果我的英语听不懂的话。
1条答案
按热度按时间u3r8eeie1#
选择行为的问题似乎是由散点图使用的自定义渲染器导致的,该自定义渲染器无法与已添加到图表的LinePointHighlighter行为一起正常工作。
要解决此问题,您可以尝试删除自定义渲染器并使用散点图的默认渲染器,这应该可以与LinePointHighlighter行为正常工作。下面是如何修改代码以使用默认渲染器的示例: