为SfCartesianChart flutter标签绘制自定义形状

Question

当用户单击图表时，我想为轴的标签绘制一个形状，如下图所示。

我绘制此图表的代码是：

SfCartesianChart(
   plotAreaBorderWidth: 0,
   trackballBehavior: _trackballBehavior,
   palette: const <Color>[AppColors.primary500],
   onTrackballPositionChanging: (TrackballArgs args) {
   },
   primaryYAxis: const NumericAxis(
     interval: 5,
     edgeLabelPlacement: EdgeLabelPlacement.hide,
     isVisible: false,
     majorGridLines: MajorGridLines(width: 0),
     rangePadding: ChartRangePadding.auto,
   ),
   primaryXAxis: CategoryAxis(
     axisLine: AxisLine(width: 1, color: theme.cardColor),
     majorTickLines: const MajorTickLines(size: 0),
     majorGridLines: const MajorGridLines(
     width: 1,
     color: AppColors.gray200,
     dashArray: <double>[5, 5],
   ),
   rangePadding: ChartRangePadding.auto,
   labelPlacement: LabelPlacement.onTicks,
   labelStyle: theme.textTheme.titleSmall!.copyWith(color: AppColors.gray500),
   ),
   series: <CartesianSeries>[
     SplineSeries<ChartData, String>(
     dataSource: chartData,
     animationDuration: 0,
     splineType: SplineType.cardinal,
     cardinalSplineTension: 0.9,
     xValueMapper: (ChartData data, _) => data.x,
     yValueMapper: (ChartData data, _) => data.y)
    ],
   ),

Answer 1

我们想让您知道，您可以通过使用“onDataLabelTapped”回调来处理数据标签上的点击事件并更新“selectedAxisLabel”来实现您的要求。通过使用“selectedAxisLabel”，我们检查了当前轴标签文本与选定的轴标签文本，并根据“selectedAxisLable”更新了轴标签。此外，我们利用“axisLabelFormatter”回调来更改所选轴标签的样式。我们分享了一个代码片段和一个示例供您参考。您可以根据您的需要修改示例。

late String selectedAxisLabel;

  @override
  void initState() {
    _trackballBehavior = TrackballBehavior(
      enable: true,
    );
    selectedAxisLabel = '';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('Jan', 35, 53),
      ChartData('Feb', 46, 36),
      ChartData('Mar', 46, 56),
      ChartData('Apr', 50, 86),
      ChartData('May', 60, 89),
      ChartData('Jun', 70, 27),
      ChartData('Jul', 75, 65),
      ChartData('Aug', 74, 70),
    ];

    return Scaffold(
      body: Center(
        child: SfCartesianChart(
          onDataLabelTapped: (onTapArgs) {
            setState(() {
              selectedAxisLabel = chartData[onTapArgs.pointIndex].x;
            });
          },
          backgroundColor: Colors.grey.shade300,
          plotAreaBorderWidth: 0,
          trackballBehavior: _trackballBehavior,
          onTrackballPositionChanging: (TrackballArgs args) {},
          primaryYAxis: const NumericAxis(
            interval: 5,
            edgeLabelPlacement: EdgeLabelPlacement.hide,
            isVisible: false,
            majorGridLines: MajorGridLines(width: 0),
            rangePadding: ChartRangePadding.auto,
          ),
          primaryXAxis: CategoryAxis(
            axisLabelFormatter: (axisLabelRenderArgs) {
              return axis(axisLabelRenderArgs);
            },
            axisLine: const AxisLine(
              width: 0,
              color: Colors.grey,
            ),
            majorTickLines: const MajorTickLines(size: 0),
            majorGridLines: const MajorGridLines(
              width: 1,
              color: Colors.grey,
              dashArray: <double>[5, 5],
            ),
            rangePadding: ChartRangePadding.auto,
            labelPlacement: LabelPlacement.onTicks,
          ),
          series: <CartesianSeries>[
            SplineSeries<ChartData, String>(
                dataLabelSettings: const DataLabelSettings(
                  isVisible: true,
                  color: Colors.blue,
                  borderRadius: 9,
                ),
                markerSettings: const MarkerSettings(
                    isVisible: true, color: Colors.blue, width: 10, height: 10),
                dataSource: chartData,
                animationDuration: 0,
                width: 4,
                color: Colors.blue,
                splineType: SplineType.cardinal,
                cardinalSplineTension: 0.9,
                dataLabelMapper: (ChartData data, _) => data.x,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y)
          ],
        ),
      ),
    );
  }

  ChartAxisLabel axis(AxisLabelRenderDetails details) {
    if (details.text == selectedAxisLabel) {
      return ChartAxisLabel(
          "${details.text} 2024",
          const TextStyle(
            color: Colors.white,
            backgroundColor: Colors.blue,
          ));
    } else {
      return ChartAxisLabel(details.text, details.textStyle);
    }
  }

如果您需要任何进一步的帮助，请告诉我们。

问候，

Preethika Selvam。