Flutter - 如何在 SPLine Chart 上获取多个工具提示？

Question

有什么方法可以通过同步融合样条图在单线系列图表上显示多个工具提示吗？ 我附加了预期的输出，就像我想要的和我得到的一样。

下面是我的代码片段。

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',
      ),
    ];
  }

我想要上面的输出。

Answer 1

您可以通过SfCartesianChart中的注释来实现您的需求。通过使用注释，您可以在绘图区域中显示多个小部件。您可以使用 SplineSeries 中的 onPointTap 回调获取点击的详细信息。这将允许您存储 ChartPointDetails 参数中点击点的索引 x 和 y。然后，您可以使用 CartesianChartAnnotation 中 x 和 y 的点击点索引来显示小部件。您还可以使用 CartesianChartAnnotation 的水平对齐和垂直对齐来调整对齐方式。我们提供了代码片段、屏幕录制、示例和用户指南文档链接供您参考。您可以根据您的需要修改示例。

UG链接，

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;

  }