Серия Область¶

Вид серии областей (CartesianAreaSeriesView) соединяет точки линиями и заполняет области между диаграммами и осью X заданными цветами. Вы можете заполнить эти области полупрозрачными цветами, чтобы смешать цвета нескольких рядов и сохранить видимыми линии сетки диаграммы под ними.

chart-views-area-series-view

Полосы

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

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

Используйте свойство CartesianSeries.DataAdapter, чтобы предоставить данные для серии.

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

xmlns:mxc="https://schemas.eremexcontrols.net/avalonia/charts"

<mxc:CartesianChart x:Name="chartControl">
    <mxc:CartesianChart.Series>
        <mxc:CartesianSeries Name="areaSeries1" DataAdapter="{Binding DataAdapter}" >
            <mxc:CartesianAreaSeriesView Color="Green" Transparency="0.3" MarkerSize="5" ShowMarkers="True"/>
        </mxc:CartesianSeries>
    </mxc:CartesianChart.Series>
</mxc:CartesianChart>

using Eremex.AvaloniaUI.Charts;

CartesianSeries series = new CartesianSeries();
chartControl.Series.Add(series);
double[] args = new double[] { 1,2,3,4,5,6,7 };
double[] values = new double[] { 5,4,3,2,3,4,5 };
series.DataAdapter = new SortedNumericDataAdapter(args, values);
series.View = new CartesianAreaSeriesView()
{
    Color = Avalonia.Media.Colors.Green,
    Transparency = 0.3,
    ShowMarkers = true,
    MarkerSize = 5
};

Совет

If you use date-time arguments, you may also need to initialize the X axis, and customize the axis scale options. Refer to the following topic for more details: Axis Scale.

Пример - Создайте два вида серии областей¶

В следующем примере создается контрол CartesianChart с двумя последовательными видами областей. Данные для представлений рядов предоставляются объектами FormulaDataAdapter, которые вычисляют значения в соответствии с указанными формулами. Подразумевается, что объект MainWindowViewModel задан в качестве контекста данных для окна.

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

chart-views-areaeriesview-example

В этом примере показано, как настроить цвет, прозрачность заливки и точечные маркеры для последовательных видов.

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

<mx:MxWindow xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ChartAreaSeriesView.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="ChartAreaSeriesView.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/EMXControls.ico"
        Title="ChartAreaSeriesView">

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

    <mxc:CartesianChart x:Name="chartControl">
        <mxc:CartesianChart.Series>
            <mxc:CartesianSeries Name="areaSeries1" DataAdapter="{Binding AreaSeries1.DataAdapter}" >
                <mxc:CartesianAreaSeriesView Color="{Binding AreaSeries1.Color}" Transparency="0.6" MarkerSize="3" ShowMarkers="True"/>
            </mxc:CartesianSeries>
            <mxc:CartesianSeries Name="areaSeries2" DataAdapter="{Binding AreaSeries2.DataAdapter}" >
                <mxc:CartesianAreaSeriesView Color="{Binding AreaSeries2.Color}" Transparency="0.6" MarkerSize="3" ShowMarkers="True"/>
            </mxc:CartesianSeries>
        </mxc:CartesianChart.Series>

        <mxc:CartesianChart.AxesX>
            <mxc:AxisX Name="xAxis" Title="Arguments" >
                <mxc:AxisX.ScaleOptions>
                    <mxc:NumericScaleOptions LabelFormatter="{Binding ArgsLabelFormatter}"/>
                </mxc:AxisX.ScaleOptions>
            </mxc:AxisX>
        </mxc:CartesianChart.AxesX>
        <mxc:CartesianChart.AxesY>
            <mxc:AxisY Title="Values"/>
        </mxc:CartesianChart.AxesY>
    </mxc:CartesianChart>
</mx:MxWindow>

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

namespace ChartAreaSeriesView.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
    static double Exp(double argument) => 2 * Math.Exp(-argument) - 2;
    static double Exp2(double argument) => Math.Exp(argument) + 2;

    [ObservableProperty] SeriesViewModel areaSeries1;
    [ObservableProperty] SeriesViewModel areaSeries2;
    [ObservableProperty] FuncLabelFormatter argsLabelFormatter = new(o => String.Format("{0:n1}", o));

    const int ItemCount = 41;
    const double Step = 0.1;

    public MainWindowViewModel()
    {
        AreaSeries1 = new() { Color = Color.FromUInt32(0xffDF3C5F), DataAdapter = new FormulaDataAdapter(-2, Step, ItemCount, Exp) };
        AreaSeries2 = new() { Color = Color.FromUInt32(0xff6F9BD1), DataAdapter = new FormulaDataAdapter(-2, Step, ItemCount, Exp2) };
    }
}

public partial class SeriesViewModel : ObservableObject
{
    [ObservableProperty] Color color;
    [ObservableProperty] ISeriesDataAdapter dataAdapter;
}

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

Вы можете использовать следующие адаптеры данных для предоставления данных для представлений рядов областей:

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

SortedNumericDataAdapter
FormulaDataAdapter

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

SortedDateTimeDataAdapter
SortedTimeSpanDataAdapter

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

QualitativeDataAdapter

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

Color — Задает цвет, используемый для отрисовки серию.
CrosshairMode — Указывает, привязывается ли метка диаграммы перекрестия к ближайшей точке данных или отображает интерполированное значение. Смотрите раздел Отображение точного или интерполированного значения в метках диаграммы перекрестий .
MarkerImage — Получает или устанавливает картинку для использования в качестве пользовательских точечных маркеров. Если картинка не указана, отображаются маркеры квадратной формы по умолчанию. Вы можете использовать экземпляр класса SvgImage для указания картинки в формате SVG.

Свойство MarkerImage объявлено с атрибутом [Content], который позволяет вам определить картинку непосредственно между <Просмотр картезианских рядов> теги.
```
<mxc:CartesianAreaSeriesView>
    <SvgImage Source="avares://Demo/Assets/circle.svg" />
</mxc:CartesianAreaSeriesView>
```
Файлы SVG содержат предопределенные цвета для элементов SVG. Чтобы эти цвета соответствовали цвету вашего ряда данных, вы можете либо:
- Предварительно вручную отредактируйте исходный файл SVG-картинки
- Используйте свойство MarkerImageCss для динамической настройки styles для элементов SVG. Стили применяются при отображении точечных маркеров.
MarkerImageCss — Указывает CSS styles для настройки во время выполнения SVG-картинки, определенной свойством MarkerImage. Основным вариантом использования является замена цветов элементов SVG на цвет серии (Color). Включите заполнитель {0}, чтобы вставить значение свойства Color в CSS-код.

Например, когда свойство MarkerImage содержит SVG-картинку с элементом круга, следующий CSS-код стилизует circle с оранжевой заливкой (используя цвет серии) и темно-красной рамкой:
```
<mxc:CartesianAreaSeriesView Color="orange" MarkerImageCss="circle {{fill:{0};stroke:darkred;}}">
    <SvgImage Source="avares://Demo/Assets/circle.svg" />
</mxc:CartesianAreaSeriesView>
```
Смотрите также: Пример - Создайте представление серии Lollipop и используйте пользовательские SVG-маркеры .
MarkerSize — Определяет размер точечных маркеров.
ShowInCrosshair — Определяет видимость метки диаграммы перекрестий для текущего ряда. Смотрите раздел Настройка меток диаграммы для перекрестия .
ShowMarkers — Включает или отключает точечные маркеры.
Thickness — Задает толщину линии.
Transparency — значение между 0 и 1, которое определяет уровень прозрачности заполненных областей.:
- 0 означает полностью непрозрачный
- 1 означает полностью прозрачный

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