Syncfusion Flutter 笛卡尔图表删除灰色“边框”

Question

我正在使用 Syncfusion、Flutter 笛卡尔图表。我正在尝试删除照片中黑色圆圈中的灰色线条。我已将 MajorGridLines、minorGridLines、majorTickLines、minorTickLines 的宽度设置为零，但它仍然出现。关于如何删除它们有什么想法吗？理想情况下，我只想显示轴。

Widget _buildGraphs() {
    return Container(
      height: MediaQuery.of(context).size.width,
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.all(10),
      child: SfCartesianChart(
        primaryXAxis: NumericAxis(
          title: AxisTitle(text: 'x / m'),
          crossesAt: 0,
          interval: 0.5,
          rangePadding: ChartRangePadding.additional,
          majorGridLines: const MajorGridLines(width: 0),
          minorGridLines: const MinorGridLines(width: 0),
          majorTickLines: const MajorTickLines(width: 0),
          minorTickLines: const MinorTickLines(width: 0),
        ),
        primaryYAxis: NumericAxis(
          title: AxisTitle(text: 'y / m'),
          crossesAt: 0,
          interval: 0.5,
          rangePadding: ChartRangePadding.additional,
          majorGridLines: const MajorGridLines(width: 0),
          minorGridLines: const MinorGridLines(width: 0),
          majorTickLines: const MajorTickLines(width: 0),
          minorTickLines: const MinorTickLines(width: 0),
        ),
        series: <CartesianSeries>[
          ScatterSeries<PointCharge, double>(
            dataSource: _pointCharges,
            xValueMapper: (PointCharge data, _) => data.x,
            yValueMapper: (PointCharge data, _) => data.y,
            markerSettings: const MarkerSettings(
              shape: DataMarkerType.circle,
            ),
          ),
          ..._lineGraphDataList.map<CartesianSeries>((seriesData) {
            return LineSeries<LineGraphData, double>(
              dataSource: seriesData,
              xValueMapper: (LineGraphData data, _) => data.x,
              yValueMapper: (LineGraphData data, _) => data.y,
              enableTooltip: false,
            );
          }).toList(),
        ],
        enableAxisAnimation: true,
        zoomPanBehavior: ZoomPanBehavior(
          enablePinching: true,
          enableDoubleTapZooming: true,
        ),
      ),
    );
  }

Answer 1

您的代码大部分看起来都很好。但是，您看到的灰线可能是由轴线引起的。要删除或隐藏它们，您可以使用primaryXAxis和primaryYAxis的axisLine属性将轴线的颜色设置为透明。

primaryXAxis: NumericAxis(
  ...
  axisLine: AxisLine(color: Colors.transparent), // Add this line
  ...
),
primaryYAxis: NumericAxis(
  ...
  axisLine: AxisLine(color: Colors.transparent), // Add this line
  ...
),