选择行为在图表中变得奇怪_flutter

pbwdgjma  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(110)

我正在用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
谁能给我一个解决的办法。如果我的英语听不懂的话。

u3r8eeie

u3r8eeie1#

选择行为的问题似乎是由散点图使用的自定义渲染器导致的,该自定义渲染器无法与已添加到图表的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],

相关问题