flutter - Flutter Syncfusion SfCartesianChart-如何对所有StackedColumnSeries使用单个yValueMapper

Question

为了澄清，我只想知道，是否可以将SfCartesianChart与StackedColumnSeries一起使用Single yValueMapper的Variable，所以以后如果我放很多数据，我就不会像这样为yValueMapper声明这么多的变量:

class ChartSampleData {
  ChartSampleData(
      {this.x,
      this.y,
      this.yValue1,
      this.yValue2,
      this.yValue3
      this.yValue4,
      this.xValue,
      this.pointColor,
      this.size,
      this.text,
      this.open,
      this.close});

  dynamic x;
  num y;
  num yValue1;
  num yValue2;
  num yValue3;
  num yValue4;
  dynamic xValue;

  Color pointColor;
  num size;
  String text;
  num open;
  num close;
}

因为我要放入的数据是基于数据库的。
我尝试做这些，我只对我的yValueMapper使用了 y，
代码

<StackedColumnSeries<ChartSampleData, String>>[
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '1:00 PM', y: 1),
            ChartSampleData(x: '2:00 PM', y: 2),
            ChartSampleData(x: '3:00 PM', y: 3),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon A'),
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '4:00 PM', y: 4),
            ChartSampleData(x: '5:00 PM', y: 5),
            ChartSampleData(x: '6:00 PM', y: 6),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon B'),
    ];

结果-它不是从0开始，因为我使用了与 yValueMapper相同的 y

Answer 1

来自Syncfusion的问候。我们已经分析了您的查询，并在下面提供了答复。
查询＃1:(我只想知道，是否可以将SfCartesianChart与StackedColumnSeries一起使用以使用单个yValueMapper的变量)
我们已经对上述查询进行了分析，如果您要对图表中的所有系列使用单个yValueMapper变量，则所有系列的图表数据源列表必须不同。例如，假设您在图表中初始化了两个StackedColumnSeries，并且其图表数据源列表的类型(例如，字段分别为SalesData的SalesData(x,y)类)的每个系列的数据点值不同，在这种情况下，仅作为数据图表的点值仅不同，您可以为两个系列yValueMapper使用相同的y变量，并为每个系列维护一个单独的数据源列表。请引用下面的代码段。

    SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <ChartSeries<SalesData, String>>[
              StackedColumnSeries<SalesData, String>(
                dataSource: <SalesData>[ // Separate data source maintained for series - 1
                  SalesData('Jan', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 34),
                  SalesData('Apr', 32),
                  SalesData('May', 40)
                ],
                xValueMapper: (SalesData sales, _) => sales.x,
                yValueMapper: (SalesData sales, _) => sales.y, // same y variable used but assign y data value from series -1 data source.
              ),
              StackedColumnSeries<SalesData, String>(
                dataSource: <SalesData>[ // // Separate data source maintained for series – 2
                  SalesData('Jan', 25),
                  SalesData('Feb', 45),
                  SalesData('Mar', 24),
                  SalesData('Apr', 12),
                  SalesData('May', 27)
                ],
                xValueMapper: (SalesData sales, _) => sales.x,
                // same y variable used but assign y data value from series -2 data source.
                yValueMapper: (SalesData sales, _) => sales.y, 
              )
            ]
)

// Initialized class for storing the data points values.
class SalesData {
  SalesData(this.x, this.y);

  final String x;
  final double y;
}

屏幕截图:
StackColumnChart
供引用的样本可以在下面找到。
https://drive.google.com/file/d/1oFrdB7INBycMgv57rl747fixexCcGSbj/view?usp=sharing
如果您还有其他疑虑，请检查上面的示例，然后与我们联系。
查询＃2 :(它不是从0开始，因为我使用了与y相同的yValueMapper)
我们在上面的查询中使用提供的代码段进行了分析，并且第二个堆积的列系列未盯着0并不是因为两个系列都使用了相同的 yValyeMapper。堆叠柱形图的默认行为是，数据序列在垂直列中一个接一个地堆叠。因此，在您的方案中，您使用了不同的x轴类别值来渲染系列，并且仅由于这个原因，第二个系列在第一个系列之后被移动并被渲染。为了避免这种类型的渲染，可以将 arrangeByIndex的 CategoryAxis属性设置为true，这将根据类别轴索引值来渲染系列。请引用下面的代码片段以获取更多引用。

SfCartesianChart(
            primaryXAxis: CategoryAxis(
                arrangeByIndex: true // Arranges the series base on the axis index values
            ),
            Series: <StackedColumnSeries<ChartSampleData, String>>[
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '1:00 PM', y: 1),
            ChartSampleData(x: '2:00 PM', y: 2),
            ChartSampleData(x: '3:00 PM', y: 3),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon A'),
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '4:00 PM', y: 4),
            ChartSampleData(x: '5:00 PM', y: 5),
            ChartSampleData(x: '6:00 PM', y: 6),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon B'),
    ];
)

有关 arrangeByIndex属性的更多引用，请查看下面的用户指南。
https://help.syncfusion.com/flutter/cartesian-charts/axis-types#indexed-category-axis
请检查以上答复，如果需要进一步的帮助，请与我们联系。
问候，
斯里拉姆·基兰