Flutter SfCartesianChart主副Y轴自定义范围显示异常及实现咨询

当然可以让主副Y轴使用相同的自定义范围值，你当前遇到的主Y轴显示两个轴的问题，是代码里重复定义轴导致的。

问题根源 #

你的代码在axes数组里额外定义了左侧的secondaryYAxis，但SfCartesianChart默认会自动生成一个primaryYAxis（默认显示在左侧），这就导致左侧出现两个Y轴重叠显示；同时你还重复定义了X轴（primaryXAxis和axes里的xAxis），也会造成X轴冗余。

修正方案 #

只需要保留一组X轴配置，同时明确设置主Y轴（左侧）和副Y轴（右侧）的范围，避免重复定义即可：

Widget budgetGraphNew() {
  List<SalesData> data = [
    SalesData('Jan', 10000, 8000),
    SalesData('Feb', 90000, 60000),
    SalesData('Mar', 30000, 20000),
    SalesData('Apr', 30000, 10000)
  ];

  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Container(
      width: 400,
      child: SfCartesianChart(
        title: ChartTitle(text: 'Continent Wise GDP'),
        legend: Legend(
          alignment: ChartAlignment.near,
          position: LegendPosition.bottom,
          isVisible: true,
        ),
        // 明确设置主X轴，去掉axes里的重复X轴定义
        primaryXAxis: CategoryAxis(),
        // 明确设置主Y轴（左侧）的范围
        primaryYAxis: NumericAxis(
          minimum: 0,
          maximum: 100000,
          interval: 20000,
          majorGridLines: MajorGridLines(width: 0),
          minorGridLines: MinorGridLines(width: 0),
        ),
        // 添加右侧的副Y轴，使用相同的范围配置
        axes: <ChartAxis>[
          NumericAxis(
            name: 'secondaryYAxis',
            opposedPosition: true, // 设置在右侧
            minimum: 0,
            maximum: 100000,
            interval: 20000,
            majorGridLines: MajorGridLines(width: 0),
            minorGridLines: MinorGridLines(width: 0),
          ),
        ],
        series: <ChartSeries>[
          ColumnSeries<SalesData, String>(
            name: 'Budget',
            dataSource: data,
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.budget,
            // 主Y轴无需指定yAxisName，默认使用primaryYAxis
          ),
          ColumnSeries<SalesData, String>(
            name: 'Expenditure',
            dataSource: data,
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.expenditure,
            yAxisName: 'secondaryYAxis', // 指定使用右侧的副Y轴
          ),
        ],
      ),
    ),
  );
}

关键调整点 #

• 删除axes里重复的CategoryAxis和左侧NumericAxis，用primaryXAxis和primaryYAxis定义主坐标轴
• 副Y轴设置opposedPosition: true放在右侧，和主Y轴使用完全一致的minimum、maximum、interval配置，实现同范围显示
• 主系列无需指定yAxisName，默认绑定primaryYAxis；副系列通过yAxisName绑定右侧的副Y轴

调整后，左侧主Y轴和右侧副Y轴就会显示相同的自定义范围，同时不会出现轴重复显示的问题。

内容的提问来源于stack exchange，提问作者user2629419