图表上的水平带区域

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

图表上的水平带区域

Horizontal bands area on the charts

syncfusion

flutter

syncfusion-chart