Серия Диапазон Областей¶

Вид серии областей диапазона (CartesianRangeAreaSeriesView) отображает две линии и заполняет область между этими линиями.

chart-views-range-area-series-view

Вам нужно предоставить два значения Y для каждой точки данных. Эти значения определяют нижнюю и верхнюю границы диапазона. Диаграмма соединяет значения Y каждой границы линиями и заполняет область между ними заданным цветом.

Создание представления серии Range¶

Чтобы создать представление серии Range, добавьте объект CartesianSeries в коллекцию CartesianChart.Series и инициализируйте CartesianSeries.View экземпляром CartesianRangeAreaSeriesView.

Используйте свойство CartesianSeries.DataAdapter, чтобы предоставить данные для серии. Для просмотра ряда областей диапазона требуется два значения Y для каждой точки данных. Вам следует использовать специальные адаптеры данных, чтобы предоставить значения Y для представления рядов области диапазона. Смотрите следующую ссылку для получения информации о поддерживаемых адаптерах данных: Данные для просмотра серии областей диапазона .

Объект CartesianRangeAreaSeriesView включает в себя свойства Color1, Color2 и Color, которые позволяют вам указывать различные цвета для линий и заливки.

В следующем коде показано, как создать представление серии областей диапазона в XAML и code-behind.

<mxc:CartesianChart x:Name="chartControl">
    <mxc:CartesianChart.Series>
        <mxc:CartesianSeries Name="rangeAreaSeries1" DataAdapter="{Binding DataAdapter}" >
            <mxc:CartesianRangeAreaSeriesView Color="Red" 
                                                Color1="Green" 
                                                Color2="Blue" 
                                                Transparency="0.4"/>
        </mxc:CartesianSeries>
    </mxc:CartesianChart.Series>
</mxc:CartesianChart>

CartesianSeries series = new CartesianSeries();
chartControl.Series.Add(series);
List<double> args = new() { 1, 2, 3, 4, 5 };
List<double> values1 = new() { -1, 5, 3, 7, 4 };
List<double> values2 = new() { 5, 1, 6, 2, 3 };
series.DataAdapter = new NumericRangeDataAdapter(args, values1, values2);
series.View = new CartesianRangeAreaSeriesView()
{
    Color = Avalonia.Media.Colors.Red,
    Transparency = 0.4,
    Color1 = Avalonia.Media.Colors.Green,
    Color2 = Avalonia.Media.Colors.Blue
};

Пример - Используйте представление серии областей диапазона для отображения минимальной и максимальной температуры за месяц¶

В следующем примере для отображения минимальных и максимальных температур в городе за месяц используется линейное представление Range Area. Адаптер данных (DateTimeRangeDataAdapter) предоставляет два значения Y для каждой точки данных (месяца).

Обратите внимание на использование свойства DateTimeScaleOptions.LabelFormatter для форматирования меток оси X произвольным способом.

chart-views-rangeAreaSeriesView-example

<mx:MxWindow xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ChartRangeAreaSeriesView.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
        xmlns:mxc="https://schemas.eremexcontrols.net/avalonia/charts"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="ChartRangeAreaSeriesView.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/EMXControls.ico"
        Title="ChartRangeAreaSeriesView">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <mxc:CartesianChart x:Name="chartControl">
        <mxc:CartesianChart.Series>
            <mxc:CartesianSeries Name="rangeAreaSeries1" DataAdapter="{Binding RangeAreaSeries1.DataAdapter}" >
                <mxc:CartesianRangeAreaSeriesView Color="{Binding RangeAreaSeries1.Color}" 
                                                  Color1="{Binding RangeAreaSeries1.Color1}" 
                                                  Color2="{Binding RangeAreaSeries1.Color2}" 
                                                  Transparency="0.6"/>
            </mxc:CartesianSeries>
        </mxc:CartesianChart.Series>
        <mxc:CartesianChart.AxesX>
            <mxc:AxisX Name="xAxis" Title="Month" >
                <mxc:AxisX.ScaleOptions>
                    <mxc:DateTimeScaleOptions LabelFormatter="{Binding MonthFormatter}"
                                              MeasureUnit="Month"/>
                </mxc:AxisX.ScaleOptions>
            </mxc:AxisX>
        </mxc:CartesianChart.AxesX>
        <mxc:CartesianChart.AxesY>
            <mxc:AxisY Title="Min/Max Daily Temperature"/>
        </mxc:CartesianChart.AxesY>
    </mxc:CartesianChart>
</mx:MxWindow>

using CommunityToolkit.Mvvm.ComponentModel;
using Avalonia.Media;
using Eremex.AvaloniaUI.Charts;
using System;
using System.Collections.Generic;

namespace ChartRangeAreaSeriesView.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{

    [ObservableProperty] FuncLabelFormatter monthFormatter = new(o => String.Format("{0:MMM}", o));
    [ObservableProperty] SeriesViewModel rangeAreaSeries1;

    public MainWindowViewModel()
    {
        RangeAreaSeries1 = new() 
        { 
            Color = Color.FromUInt32(0xffE7E8D1), 
            Color1 = Color.FromUInt32(0xffe95057),
            Color2 = Color.FromUInt32(0xff589cc1),
        };
        List<double> values1 = new() { -4.2, -3.4, 2.5, 11.9, 19.6, 22.8, 25.1, 23.6, 17.3, 9.6, 1.6, -2.7 };
        List<double> values2 = new() { -9.7, -10.1, -5.3, 1.8, 7.9, 11.6, 14.0, 12.2, 7.4, 2.5, -3.1, -7.5 };
        List<DateTime> args = new();
        for (int i = 1; i <=12; i++) 
            args.Add(new DateTime(DateTime.Now.Year, i, 1));
        rangeAreaSeries1.DataAdapter = new DateTimeRangeDataAdapter(args, values1, values2);
    }
}

public partial class SeriesViewModel : ObservableObject
{
    [ObservableProperty] Color color;
    [ObservableProperty] Color color1;
    [ObservableProperty] Color color2;
    [ObservableProperty] DateTimeRangeDataAdapter dataAdapter;
}

Данные для представления серии областей диапазона¶

Вы можете использовать следующие адаптеры данных для предоставления данных для представления рядов областей диапазона. Эти адаптеры данных позволяют указывать два значения Y для каждого аргумента.

Числовые значения X:

NumericRangeDataAdapter

Значения даты и времени X:

DateTimeRangeDataAdapter
TimeSpanRangeDataAdapter

Качественные значения X:

QualitativeRangeDataAdapter

Свойства просмотра серии Range Area¶

Color — Задает цвет для заполнения области между двумя линиями. Используйте опцию Transparency, чтобы контролировать уровень прозрачности заполненной области.
Color1 — Указывает цвет, которым будет рисовать первую линию.
Color2 — Указывает цвет, которым будет рисовать вторую линию.
CrosshairMode — Указывает, привязывается ли метка диаграммы перекрестия к ближайшей точке данных или отображает интерполированное значение. Смотрите раздел Отображение точного или интерполированного значения в метках диаграммы перекрестий .
Marker1Image — Позволяет указать картинку в формате SVG для использования в качестве точечных маркеров для первой линии.
Marker1ImageCss — Указывает CSS-код, который позволяет настраивать цвета элементов на указанной SVG-картинке (Marker1Image).
Marker1Size — Задает размер точечных маркеров для первой линии.
Marker2Image — Позволяет указать картинку в формате SVG для использования в качестве точечных маркеров для второй линии.
Marker2ImageCss — Указывает CSS-код, который позволяет настраивать цвета элементов на указанной SVG-картинке (Marker2Image).
Marker2Size — Задает размер точечных маркеров для второй линии.
ShowInCrosshair — Определяет видимость метки диаграммы перекрестий для текущего ряда. Смотрите раздел Настройка меток диаграммы для перекрестия .
ShowMarkers1 — Включает или отключает точечные маркеры для первой линии.
ShowMarkers2 — Включает или отключает точечные маркеры для второй линии.
Thickness1 — Определяет толщину первой линии.
Thickness2 — Указывает толщину второй линии.
Transparency — Возвращает или устанавливает уровень прозрачности для заполненной области, выраженный в виде значения от 0 (полностью прозрачного) до 1 (полностью непрозрачного).

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.