如何为Syncfusion Chart的PlotBand动态设置associatedAxisEnd值？

问题描述 #

需要绘制从X轴延伸至对应Y值高度的垂直线，Y值从数据库获取为动态值（例如1月1日对应45，1月2日对应65）。当前代码中PlotBand的associatedAxisEnd只能设置固定值，希望通过遍历图表数据来动态配置该参数。

当前代码示例：

primaryXAxis: CategoryAxis(
    axisLine: const AxisLine(width: 3),
    majorGridLines: const MajorGridLines(width: 0, 
    color: Colors.transparent),
    plotBands: 
    <PlotBand>[
                 PlotBand(
                   isVisible: true,
                   isRepeatable: true,
                   repeatEvery: 2,
                   size: 1,
                   borderWidth: 1,
                   repeatUntil: 6,
                   associatedAxisEnd: 50, // 能否在这里通过循环动态设置？
                   borderColor: Colors.grey,
                   dashArray : const <double>[5, 5]
                          ),
                     ]
    )

图表示例：

解决方案 #

可以通过遍历数据动态生成PlotBand列表，无需依赖isRepeatable属性，为每个数据点单独创建对应垂直线：

• 先准备从数据库获取的动态数据列表，示例如下：

// 模拟从数据库获取的日期与对应Y值数据
final List<Map<String, dynamic>> chartData = [
  {'date': '1月1日', 'yValue': 45},
  {'date': '1月2日', 'yValue': 65},
  // 补充更多数据
];

• 遍历数据生成PlotBand列表：

primaryXAxis: CategoryAxis(
  axisLine: const AxisLine(width: 3),
  majorGridLines: const MajorGridLines(width: 0, color: Colors.transparent),
  plotBands: chartData.asMap().entries.map((entry) {
    int index = entry.key;
    var data = entry.value;
    return PlotBand(
      isVisible: true,
      start: index.toDouble(), // 对应X轴分类的索引位置
      end: index.toDouble(),
      size: 1,
      borderWidth: 1,
      associatedAxisEnd: data['yValue'], // 动态绑定数据库返回的Y值
      borderColor: Colors.grey,
      dashArray: const <double>[5, 5],
    );
  }).toList(),
)

关键说明 #

• 利用asMap()获取数据的索引，匹配CategoryAxis中X轴刻度的顺序位置。
• 将PlotBand的start和end设为相同索引值，即可生成垂直方向的线条。
• 直接把数据库获取的yValue赋值给associatedAxisEnd，实现垂直线高度的动态变化。

如果你的X轴是日期数值轴而非分类轴，只需将start和end调整为对应日期的数值即可。

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