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

Question

澄清一下，我只想知道，如果可以使用 SfCartesianChart 和 StackedColumnSeries 来使用单个 yValueMapper 的变量，所以稍后如果我放很多数据我不会像这样为 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'),
    ];

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

Answer 1

查询#1：（我只是想知道，如果可以将 SfCartesianChart 与 StackedColumnSeries 一起使用以使用单个 yValueMapper 的变量） 我们已经分析了上面的查询，如果要对图表中的所有系列使用单个 yValueMapper 的变量，那么所有系列的图表数据源列表必须不同。例如，假设您在图表中初始化了两个 StackedColumnSeries，并且它们的图表数据源列表的类型（例如 SalesData class 的字段分别为 SalesData(x,y)）每个系列的不同数据点值，在这种情况下，因为只有图表的数据点值不同，您可以对两个系列使用相同的 y 变量 yValueMapper，并为每个系列维护一个单独的数据源列表.请参考下面的代码片段。

    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 开始，因为我使用了相同的 yValueMapper，即 y）

我们已经使用提供的代码片段对上述查询进行了分析，第二个堆叠列系列不是从 0 开始并不是因为两个系列使用了相同的 yValyeMapper。堆积柱形图的默认行为是数据系列在垂直柱中一个堆叠在另一个之上。因此，在您的场景中，您使用了不同的 x-axis 类别值来渲染系列，仅由于此，第二个系列被移动到第一个系列之后并被渲染。要避免这种类型的呈现，您可以将 CategoryAxis 的 arrangeByIndex 属性设置为 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

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

Flutter Syncfusion SfCartesianChart - How to use single yValueMapper to all of your StackedColumnSeries

syncfusion

dart

flutter

flutter-layout