Skip to content

Серия Lollipop

Представление серии Lollipop (CartesianLollipopSeriesView) визуализирует данные с помощью тонких линий с маркерами в конце. Маркеры указывают на отдельные точки данных, в то время как линии соединяют маркеры с базовой линией (горизонтальной или вертикальной осью). Диаграмма Lollipop использует квадратные маркеры по умолчанию, но также поддерживает пользовательские маркеры в формате SVG. На следующей картинке показан вид серии Lollipop с круглыми маркерами, загруженными из файла SVG.

chart-views-lollipop-series-view

Создайте представление серии Lollipop

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

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

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

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

<mxc:CartesianChart x:Name="chartControl">
    <mxc:CartesianSeries DataAdapter="{Binding DataAdapter}">
        <mxc:CartesianLollipopSeriesView Color="YellowGreen"
                                            LineColor="Green"
                                            Thickness="2"
                                            MarkerSize="8"
                                            Orientation="Vertical">
        </mxc:CartesianLollipopSeriesView>
    </mxc:CartesianSeries>
</mxc:CartesianChart>

using Eremex.AvaloniaUI.Charts;

CartesianSeries series = new CartesianSeries();
chartControl.Series.Add(series);
double[] args = new double[] { -1, 0, 1, 2, 3, 4, 5 };
double[] values = new double[] { 10, 14, 15, 13, 5, 0, -3 };
series.DataAdapter = new SortedNumericDataAdapter(args, values);
series.View = new CartesianLollipopSeriesView()
{
    LineColor = Avalonia.Media.Colors.Green,
    Color = Avalonia.Media.Colors.YellowGreen,
    MarkerSize = 8,
    Thickness = 2,
    Orientation = CartesianLollipopOrientation.Horizontal
};

Пример - Создайте представление серии Lollipop и используйте пользовательские маркеры точек данных SVG

В следующем примере создается представление серии Lollipop для визуализации выборочных данных, предоставляемых объектом FormulaDataAdapter. В примере показано, как использовать картинку SVG в качестве пользовательских маркеров точек данных и динамически настраивать цвета элементов SVG таким образом, чтобы они соответствовали цвету ряда данных.

create-a-lollipop-series-view-and-use-custom-svg-markers-example-result

  1. Укажите картинку SVG в качестве точечных маркеров

    Используйте свойство MarkerImage, чтобы назначить картинку SVG в качестве маркеров точек данных. Свойство MarkerImage определено с помощью атрибута [Content], позволяющего вам указать картинку SVG в качестве содержимого <Картезианский взгляд на лоллипопсериал> метка:

    <mxc:CartesianLollipopSeriesView ...>
    <SvgImage Source="avares://ChartLollipopSeriesView/Assets/circle.svg" />
</mxc:CartesianLollipopSeriesView>

    Файл 'circle.svg' отображает круг с зеленой каймой и желтой заливкой:

    chart-lollipop-series-view-custom-marker-greenyellowcircle

    <!-- part of 'circle.svg' file -->
<svg ...>
    <circle fill="yellow" stroke="green" stroke-width="10" cx="40" cy="40" r="30"/>
</svg>

    На следующем шаге показано, как динамически переопределить эти цвета без изменения исходного SVG-файла.

  2. Примените цвет серии к элементам SVG

    Последовательный вид Lollipop (а также любой потомок Точечного последовательного вида ) поддерживает свойство MarkerImageCss, которое включает CSS-based SVG styling. Это свойство позволяет вам настраивать стили определенных элементов SVG во время выполнения программы. Например, CSS-код может применить цвет серии к отдельным элементам SVG.

    <mxc:CartesianLollipopSeriesView 
    Color="Orange"
    MarkerImageCss="circle {{fill:{0};stroke:darkred;}}"
>

    Приведенный выше CSS-код настраивает стиль SVG-объекта circle. Новый стиль рисует границу темно-красным цветом и заполняет круг, используя цвет серии данных.

    • Заполнитель {0} — вставляет значение свойства CartesianLollipopSeriesView.Color.

    Результат продемонстрирован ниже:

    chart-lollipop-series-view-custom-marker-redorange

  3. Установите размер точечных маркеров

    Используйте свойство MarkerSize, чтобы настроить размер точечных маркеров.

Полный код:

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

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <mxc:CartesianChart x:Name="chartControl">
        <mxc:CartesianChart.Series>
            <mxc:CartesianSeries Name="lollipopSeries1" 
                                 DataAdapter="{Binding PointSeriesVM1.DataAdapter}" 
                                 SeriesName="Income"
                                 >
                <mxc:CartesianLollipopSeriesView Color="Orange"
                                                 LineColor="Dimgray"
                                                 LineThickness="3"
                                                 MarkerSize="10"
                                                 MarkerImageCss="circle {{fill:{0};stroke:darkred;}}"
                                                 >
                    <SvgImage Source="avares://ChartLollipopSeriesView/Assets/circle.svg" />
                </mxc:CartesianLollipopSeriesView>
            </mxc:CartesianSeries>
        </mxc:CartesianChart.Series>
        <mxc:CartesianChart.AxesX>
            <mxc:AxisX Title="Weeks" MinorCount="0" ShowMinorGridlines="False">
                <mxc:AxisX.ScaleOptions>
                    <mxc:NumericScaleOptions GridSpacing="1" />
                </mxc:AxisX.ScaleOptions>
            </mxc:AxisX>
        </mxc:CartesianChart.AxesX>
        <mxc:CartesianChart.AxesY>
            <mxc:AxisY Title="Million yuan"/>
        </mxc:CartesianChart.AxesY>
    </mxc:CartesianChart>
</mx:MxWindow>

// MainWindowViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using Eremex.AvaloniaUI.Charts;
using System;
using System.Collections.Generic;

namespace ChartLollipopSeriesView.ViewModels
{
    public partial class MainWindowViewModel : ViewModelBase
    {
        static double[] values = new double[] { 1, 2, 2.6, 2.5, 2, 1.3, 0.7, -0.3, 0, 1, 1.6, 2.4, 2.8, 3.2, 2.95, 3 };
        static double MyFunc(double argument) => values[(int)argument % values.Length];

        [ObservableProperty] SeriesViewModel pointSeriesVM1;

        public MainWindowViewModel()
        {
            PointSeriesVM1 = new()
            {
                DataAdapter = new FormulaDataAdapter(0, 1, values.Length, MyFunc)
            };
        }
    }

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

<!-- circle.svg image -->
<svg viewBox="0 0 80 80" width="80" height="80" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle fill="yellow" stroke="green" stroke-opacity="1" stroke-width="10" cx="40" cy="40" id="svg_1" r="30"/>
</g>
</svg>

Данные для просмотра серии Lollipop

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

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

  • FormulaDataAdapter
  • ScatterDataAdapter
  • SortedNumericDataAdapter

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

  • SortedDateTimeDataAdapter
  • SortedTimeSpanDataAdapter

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

  • QualitativeDataAdapter

Просмотр свойств серии Lollipop

  • Color — Задает цвет точечных маркеров.
  • LineColor — Указывает цвет линии.
  • LineThickness — Задает толщину линии.

  • LineOrientation — Задает направление линий.

    • Vertical — линии проходят вертикально от точечных маркеров к оси X.

      chart-lollipop-vert-orientation

    • Horizontal — линии проходят горизонтально от точечных маркеров до оси Y.

      chart-lollipop-horz-orientation

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

    Свойство MarkerImage объявлено с атрибутом [Content], который позволяет вам определить картинку непосредственно между <Картезианский взгляд на лоллипопсериал> теги.

    <mxc:CartesianLollipopSeriesView>
    <SvgImage Source="avares://ChartLollipopSeriesView/Assets/circle.svg" />
</mxc:CartesianLollipopSeriesView>

    Файлы SVG содержат предопределенные цвета для элементов SVG. Чтобы эти цвета соответствовали цвету вашего ряда данных, вы можете либо:

    • Предварительно вручную отредактируйте исходный файл SVG-картинки
    • Используйте свойство MarkerImageCss для динамической настройки styles для элементов SVG. Стили применяются при отображении точечных маркеров.

  • MarkerImageCss — Указывает CSS styles для настройки во время выполнения SVG-картинки, определенной свойством CartesianLollipopSeriesView.MarkerImage. Основным вариантом использования является замена цветов элементов SVG на цвет серии (CartesianLollipopSeriesView.Color). Включите заполнитель {0}, чтобы вставить значение свойства CartesianLollipopSeriesView.Color в CSS-код.

    Например, когда свойство MarkerImage содержит SVG-картинку с элементом круга, следующий CSS-код стилизует circle с оранжевой заливкой (используя цвет серии) и темно-красной рамкой:

    <mxc:CartesianLollipopSeriesView Color="orange" MarkerImageCss="circle {{fill:{0};stroke:darkred;}}">
    <SvgImage Source="avares://ChartLollipopSeriesView/Assets/circle.svg" />
</mxc:CartesianLollipopSeriesView>

    create-a-lollipop-series-view-and-use-custom-svg-markers-preview

    Complete code: Пример - Создайте представление серии Lollipop и используйте пользовательские SVG-маркеры .

  • MarkerSize — определяет размер точечных маркеров в пикселях.

  • ShowInCrosshair — Определяет видимость метки диаграммы перекрестий для текущего ряда. Смотрите раздел Настройка меток диаграммы для перекрестия .



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