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

问题描述

为澄清起见，我只想知道，是否可以将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;
}

因为我要放入的数据基于数据库。

我尝试执行这些操作，仅将y用于我的yValueMapper，

代码

<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,dataSource: [
            ChartSampleData(x: '4:00 PM',y: 4),ChartSampleData(x: '5:00 PM',y: 5),ChartSampleData(x: '6:00 PM',y: 6),name: 'Coupon B'),];

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

解决方法

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),45),24),12),27)
                ],// same y variable used but assign y data value from series -2 data source.
                yValueMapper: (SalesData sales,)
            ]
)

// 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 ：（由于我使用了与y相同的yValueMapper，所以它并非从0开始）

我们在上面的查询中使用提供的代码段进行了分析，并且第二个堆积的列系列不以0开头是不是因为两个系列使用相同的yValyeMapper。堆叠柱形图的默认行为是，数据序列在垂直列中一个接一个地堆叠。因此，在您的方案中，您使用了不同的x轴类别值来渲染系列，并且仅由于这个原因，第二个系列在第一个系列之后被移动并被渲染。为避免这种类型的渲染，可以将arrangeByIndex的{​​{1}}属性设置为true，这将根据类别轴索引值来渲染系列。请参考下面的代码片段以获取更多参考。

CategoryAxis

有关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,yValueMapper: (ChartSampleData sales,name: 'Coupon A'),StackedColumnSeries<ChartSampleData,dataSource: [ ChartSampleData(x: '4:00 PM',y: 4),ChartSampleData(x: '5:00 PM',y: 5),ChartSampleData(x: '6:00 PM',y: 6),name: 'Coupon B'),]; ) 属性的更多参考，请查看下面的用户指南。

https://help.syncfusion.com/flutter/cartesian-charts/axis-types#indexed-category-axis

如果需要进一步的帮助，请检查以上答复并回复我们。

此致，
斯里拉姆·基兰（Sriram Kiran）