Область горизонтальных полос на графиках

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