如何不在 syncfusion flutter 图表中绘制从 0 开始的线？

Question

我正在绘制 syncfusion 折线图在某些情况下我的值高于 90 我得到的值为零该线是从基线绘制的如果值为零，我不想绘制该线。

示例：

我想删除我在图片中圈出的线。

代码如下

main.dart

import 'package:chartexmpl/widget/syncfusuion_line_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart',
      theme: ThemeData(
        primarySwatch: Colors.blue,
  ),
  home: const MyHomePage(title: 'Chart Demo'),
);
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double radius = 12.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Container(
      padding: EdgeInsets.all(20),
      color: Colors.blue[100],
      child: Column(children: [
        Card(
          child: SYncfusion(),
        ),
      ]),
    ),
      ),
    );
  }
}

syncfusion_line_chart.dart

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class SYncfusion extends StatefulWidget {
  const SYncfusion({Key? key}) : super(key: key);

  @override
  State<SYncfusion> createState() => _SYncfusionState();
}

class _SYncfusionState extends State<SYncfusion> {
  late List<SalesData> _chartData;
  late TooltipBehavior _tooltipBehavior;
  @override
  void initState() {
    _chartData = getChartData();
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      legend: Legend(
      isVisible: true, isResponsive: true, position: LegendPosition.bottom),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries>[
    LineSeries<SalesData, String>(
        name: 'User 1',
        dataSource: _chartData,
        xValueMapper: (SalesData sales, _) => sales.year,
        yValueMapper: (SalesData sales, _) => sales.sales,
        markerSettings: MarkerSettings(isVisible: true),
        enableTooltip: true),
  ],
  primaryXAxis: CategoryAxis(
    labelRotation: -60,
  ),
  primaryYAxis: NumericAxis(
    maximum: 100,
    minimum: 90,
    desiredIntervals: 10,
    labelFormat: '{value}',
  ),
);
  }
}

List<SalesData> getChartData() {
  final List<SalesData> chartData = [
SalesData("2013", 100),
SalesData("2014", 95),
SalesData("2015", 98),
SalesData("2016", 94),
SalesData("2017", 94),
SalesData("2018", 0),
SalesData("2019", 94),
SalesData("2020", 96),
SalesData("2021", 98),
SalesData("2022", 96),
SalesData("2023", 99)
];
  return chartData;
}

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

Answer 1

我们建议在数据源中使用空值而不是 0，或者在将数据源正确绑定到 yValueMapper 时分配空值，如下面的代码片段，这将帮助您实现您的要求。

代码片段：

yValueMapper: (SalesData sales, _) =>
    sales.sales == 0 ? null : sales.sales,

截图

如何不在 syncfusion flutter 图表中绘制从 0 开始的线？

How not to plot line from 0 in syncfusion flutter chart?

charts

syncfusion

flutter