在图表顶部水平显示图例名称(颤振图)

Question

我使用这个SfCartesianChart在颤栗和这里，我想显示的传奇名字水平顶部的图表，如父亲，母亲，儿子和女儿。我不想竖直地展示它。我也想改变图标，它显示了传说的名字。我想把它显示在传奇名字前面的彩色填充框中。比如举个例子。

我该怎么做？请给我一些建议。

我想这样表现出来：

​

​

​

​

class _StackedBarState extends State<StackedBar> {
  late List<ExpenseData> _chartData;
  late TooltipBehavior _tooltipBehavior;

  @override
  void initState() {
    _chartData = getChartData();
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      title: ChartTitle(text: "Chart Title"),
      legend: Legend(isVisible: true),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries>[
        StackedBarSeries<ExpenseData, String>(
            dataSource: _chartData,
            xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
            yValueMapper: (ExpenseData exp, _) => exp.father,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: 'father',color: Colors.green,width: 0.4 ,
        markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.mother,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: "Mother",color: Colors.yellowAccent,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.son,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: "son",color: Colors.red,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),
        StackedBarSeries<ExpenseData, String>(
          dataSource: _chartData,
          xValueMapper: (ExpenseData exp, _) => exp.expenseCategory,
          yValueMapper: (ExpenseData exp, _) => exp.daughter,
            dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
        name: 'daughter',color: Colors.orange,width: 0.4 ,
            markerSettings: MarkerSettings(isVisible: true)),

      ],
      primaryXAxis: CategoryAxis(),
    );
  }

  List<ExpenseData> getChartData() {
    final List<ExpenseData> charData = [
      ExpenseData('others', 55, 30, 65, 80),
      ExpenseData('gaurav shankar', 25, 40, 56, 75),
      ExpenseData('bal kishor', 15, 50, 36, 89),
      ExpenseData('shashi singh', 45, 60, 56, 89),
      ExpenseData('santosh kumar', 30, 10, 60, 90),
    ];
    return charData;
  }
}

class ExpenseData {
  ExpenseData(
    this.expenseCategory,
    this.father,
    this.mother,
    this.son,
    this.daughter,
  );

  final String expenseCategory;
  final num father;
  final num mother;
  final num son;
  final num daughter;
}

Answer 1

只需将Legend.position设置为LegendPosition.top，如下所示：

  legend: Legend(isVisible: true, position: LegendPosition.top),

其结果是：

​

​