如何翻转Flutter Syncfusion柱状图的坐标轴，使星期在X轴、数值在Y轴

报错根因 #

你互换xValueMapper和yValueMapper后报错是两个不匹配导致的：

• 泛型不匹配：你声明的BarSeries<SalesData, String>第二个泛型参数规定了X轴数据类型为String，互换后xValueMapper返回的是int类型的销售额，类型不兼容直接抛出异常
• 轴配置不匹配：你配置的primaryXAxis为仅支持字符串分类数据的CategoryAxis，primaryYAxis为仅支持数值的NumericAxis，互换映射值后数据类型和轴预期类型不匹配

正确实现方案 #

你想要的「底部X轴显示星期几、左侧Y轴显示数值」的效果不需要互换xValueMapper和yValueMapper，只需要把BarSeries替换为ColumnSeries即可：

注意：Syncfusion图表中BarSeries是横向柱图，X轴为垂直方向；ColumnSeries是纵向柱图，X轴为水平底部方向，和你预期的展示效果一致。

代码修改部分 #

仅需要替换series定义代码即可，其余逻辑无需改动：

series: <ChartSeries>[
  // 把BarSeries改为ColumnSeries
  ColumnSeries<SalesData, String>(
      name: 'Sales',
      dataSource: _salesData,
      xValueMapper: (SalesData sales, _) => sales.daysOfWeek,
      yValueMapper: (SalesData sales, _) => sales.sale,
      dataLabelSettings: DataLabelSettings(isVisible: true),
      enableTooltip: true),
],

可选优化 #

建议给SalesData的字段显式指定类型，避免后续出现隐式类型推断错误：

class SalesData {
  final String daysOfWeek;
  final int sale;

  SalesData(this.daysOfWeek, this.sale);
}

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