flutter - 图表上的水平条带区域

Question

我一直在使用 Flutter 包 syncfusion_flutter_charts。我一直很喜欢它，但即使在尝试搜索文档之后，我也不知道如何执行我的应用程序所需的图表的某些部分：

这是我的应用程序当前状态的屏幕截图：

最后应该是这样的：

不要介意要点，我想知道如何使图表背景在 0 到 140 之间以及 180 和更多之间变为灰色。

而且我还想知道是否可以在“白色”区域中创建那些红色区域。

Answer 1

我们想分享一些关于绘图带功能的信息，您可以使用这些信息在绘图区域中用不同的颜色着色差异范围，以提高图表的可读性。因此，为了在一定范围内将图表背景着色为灰色，您可以使用绘图带功能。请参阅下面的代码片段以供进一步参考。

SfCartesianChart(
   primaryYAxis: NumericAxis( 
                  // renders plot band between 65 and 140 in grey color.
                  plotBands: [
                    PlotBand(
                        shouldRenderAboveSeries: false,
                        start: 65,
                        end: 140,
                        color: Colors.grey,
                        opacity: 0.3)
                  ]
   ),
)

截屏：

有关绘图带功能的进一步参考，请查看下面的用户指南。 https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands

同样关于这个查询“在“白色”区域中创建那些红色区域”，我们创建了一个解决方法示例，在该示例中，我们使用图表小部件中可用的注释功能来呈现红色区域作为即将发生的点的指示在灰色区域之上。在解决方法示例中，我们在自定义绘制器的帮助下绘制了自定义曲线形状，并在注释功能的帮助下在图表中的必要点处渲染了该形状。我们还附上​​了下面的解决方法示例供您参考。示例：https ://drive.google.com/file/d/1sMtY12GoSvaSXefaxmLafr1xTm_R7_b_/view?usp=sharing