Серия Рассеянных точек, соединенных линиями¶

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

chart-views-scatter-line-series-view

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

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

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

<mxc:CartesianChart x:Name="chartControl">
    <mxc:CartesianChart.Series>
        <mxc:CartesianSeries Name="scatterLineSeries1" DataAdapter="{Binding DataAdapter}" >
            <mxc:CartesianScatterLineSeriesView Color="Red" 
                                                ShowMarkers="True"
                                                MarkerSize="4" Thickness="2"/>
        </mxc:CartesianSeries>
    </mxc:CartesianChart.Series>
</mxc:CartesianChart>

CartesianSeries series = new CartesianSeries();
chartControl.Series.Add(series);
List<(double, double)> points = new List<(double, double)>() { (0, 2), (-1, 3), (-2, 0), (2,1), (-2,5) };
// The ScatterDataAdapter allows unsorted points
series.DataAdapter = new ScatterDataAdapter(points);
series.View = new CartesianScatterLineSeriesView()
{
    Color = Avalonia.Media.Colors.Green,
    MarkerSize = 4,
};

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

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

chart-views-scatterLineSeriesView-example

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

    <mxc:CartesianChart x:Name="chartControl">
        <mxc:CartesianChart.Series>
            <mxc:CartesianSeries Name="scatterLineSeries1" DataAdapter="{Binding ScatterLineSeriesVM1.DataAdapter}" >
                <mxc:CartesianScatterLineSeriesView Color="{Binding ScatterLineSeriesVM1.Color}" 
                                                    ShowMarkers="True"
                                                    MarkerSize="4" Thickness="2"/>
            </mxc:CartesianSeries>
        </mxc:CartesianChart.Series>
        <mxc:CartesianChart.AxesX>
            <mxc:AxisX Name="xAxis" Title="Parameter 1" />
        </mxc:CartesianChart.AxesX>
        <mxc:CartesianChart.AxesY>
            <mxc:AxisY Title="Parameter 2"/>
        </mxc:CartesianChart.AxesY>
    </mxc:CartesianChart>
</mx:MxWindow>

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

namespace ChartScatterLineSeriesView.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty] SeriesViewModel scatterLineSeriesVM1;

    public MainWindowViewModel()
    {
        ScatterLineSeriesVM1 = new()
        {
            Color = Color.FromUInt32(0xff0d628d),
            DataAdapter = new ScatterDataAdapter(GenerateSquareSpiralData())
        };
    }

    private List<(double, double)> GenerateSquareSpiralData()
    {
        List<(double, double)> points = new List<(double, double)> ();
        double x = 2, y = 2;
        int stepsPerSide = 1; // Steps before changing direction
        int direction = 3; // 0=right, 1=up, 2=left, 3=down
        int turns = 4;
        double stepSize = 1.0;

        points.Add((x, y));

        for (int i = 0; i < turns * 4; i++) // 4 sides per turn
        {
            for (int step = 0; step < stepsPerSide; step++)
            {
                switch (direction)
                {
                    case 0: x += stepSize; break; // Right
                    case 1: y += stepSize; break; // Up
                    case 2: x -= stepSize; break; // Left
                    case 3: y -= stepSize; break; // Down
                }
                points.Add((x, y));
            }
            direction = (direction + 1) % 4; // Change direction
            if (i % 2 == 1) stepsPerSide++; // Increase steps every 2 turns
        }
        return points;
    }
}

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

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

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

ScatterDataAdapter

Свойства просмотра серии рассеянных линий¶

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

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

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