Начало работы с графиками - Шаблон MVVM¶

Вы можете заполнить контролы диаграммы данными, используя шаблон проектирования MVVM. Это полезно, когда вам нужно отобразить несколько рядов данных.

В этом руководстве показано, как рисовать две линии в контроле CartesianChart с использованием шаблона MVVM. Данные для диаграмм с линиями в этом примере вычисляются с использованием математических функций (синус и косинус). Вы можете найти полный код этого руководства в модуле Cartesian Chart→Line демонстрационного приложения.

charts-get-started-mvvm-two-lines

Определение моделей просмотра¶

Начните с определения моделей представления, которые предоставляют данные и свойства рядов для контрола диаграммы.

CartesianLineSeriesViewViewModel — Модель основного представления, которая будет установлена в качестве контекста данных контрола диаграммы. Основная модель представления предоставляет свойство CartesianLineSeriesViewViewModel.Series, которое определяет набор моделей представления рядов данных.
SeriesViewModel — Модель представления для ряда данных.

// The main View Model
public partial class CartesianLineSeriesViewViewModel : ChartsPageViewModel
{
    static double Sin(double argument) => Math.Sin(argument);
    static double Cos(double argument) => Math.Cos(argument);

    const int ItemCount = 100;
    const double Step = 4 * Math.PI / ItemCount;

    // A collection of View Models used to create data series.
    [ObservableProperty] ObservableCollection<SeriesViewModel> series = new()
    {
        new SeriesViewModel { Color = Color.FromArgb(255, 189, 20, 54), DataAdapter = new FormulaDataAdapter(0, Step, ItemCount, Sin)},
        new SeriesViewModel { Color = Color.FromArgb(255, 0, 120, 122), DataAdapter = new FormulaDataAdapter(0, Step, ItemCount, Cos)},
    };
}

// A View Model for a data series.
public partial class SeriesViewModel : ObservableObject
{
    [ObservableProperty] string axisXKey;
    [ObservableProperty] string axisYKey;
    [ObservableProperty] Color color;
    [ObservableProperty] ISeriesDataAdapter dataAdapter;
}

Коллекция CartesianLineSeriesViewViewModel.Series инициализируется двумя моделями последовательного представления. Декартова диаграмма отобразит их как два ряда данных.

Модель представления для ряда данных (SeriesViewModel) предоставляет свойства, которые задают данные и цвет отрисовки ряд в контроле диаграммы:

Color — Цвет, которым можно рисовать ряд данных.
DataAdapter — объект ISeriesDataAdapter, который предоставляет данные для ряда.

Диаграммы Eremex поставляются с несколькими адаптерами данных для различных типов данных (числовых, дат-временных и качественных). Все адаптеры данных реализуют интерфейс ISeriesDataAdapter.

В этом руководстве используется объект Eremex.AvaloniaUI.Charts.FormulaDataAdapter. В нем задается функция, которая возвращает числовые значения Y с шагом Step.

Несколько примеров других адаптеров данных включают: - SortedNumericDataAdapter — Содержит пары (числовые X, числовые Y), отсортированные по значениям X. - QualitativeDataAdapter — Поставляет пары (строка X, число Y).

Дополнительную информацию смотрите в следующем разделе: Декартова диаграмма .

Создание контрола диаграммы¶

В XAML создайте контрол CartesianChart и инициализируйте его свойства CartesianChart.SeriesSource и CartesianChart.SeriesTemplate:

CartesianChart.SeriesSource — Коллекция моделей представления, представляющих ряды данных (коллекция CartesianLineSeriesViewViewModel.Series, в которой хранятся объекты SeriesViewModel).

Предполагается, что контекст данных контрола диаграммы установлен на объект CartesianLineSeriesViewViewModel.

CartesianChart.SeriesTemplate - Шаблон, который создает объект CartesianSeries из модели последовательного просмотра. Класс CartesianSeries инкапсулирует один ряд данных в контрол CartesianChart.

<mxc:CartesianChart Grid.Column="0" Classes="DemoChart" 
 SeriesSource="{Binding Series}" x:Name="chart1">
    <mxc:CartesianChart.SeriesTemplate>
        <DataTemplate x:DataType="vm:SeriesViewModel">
            <mxc:CartesianSeries DataAdapter="{Binding DataAdapter}">
                <mxc:CartesianLineSeriesView Color="{Binding Color}"
                                             ShowMarkers="True"
                                             MarkerSize="4"
                                             Thickness="2"/>
            </mxc:CartesianSeries>
        </DataTemplate>
    </mxc:CartesianChart.SeriesTemplate>
</mxc:CartesianChart>

При создании объекта CartesianSeries инициализируйте следующие свойства, чтобы указать данные серии и просмотреть:

CartesianSeries.DataAdapter — Адаптер данных, который предоставляет данные. Присвоите этому свойству значение свойства DataAdapter, определенного в модели представления.
CartesianSeries.View — Представление серии, которое определяет визуальное представление серии данных.

Настройка просмотра серии¶

Свойство CartesianSeries.View определяет визуальное представление ряда данных. В XAML вы можете указать представление в качестве содержимого объекта CartesianSeries.

<mxc:CartesianSeries DataAdapter="{Binding DataAdapter}">
    <mxc:CartesianLineSeriesView Color="{Binding Color}"
                                    ShowMarkers="True"
                                    MarkerSize="4"
                                    Thickness="2"/>
</mxc:CartesianSeries>

В этом руководстве свойство CartesianSeries.View инициализируется объектом CartesianLineSeriesView для отображения данных в виде линии, соединяющей нижележащие точки данных.

get-started-view-example-CartesianLineSeriesView

Чтобы по-другому представить данные в своих проектах, используйте другие представления рядов (потомки класса SeriesViewBase). Ниже приведены несколько примеров доступных представлений рядов:

get-started-view-example-others

Представление серии содержит свойства, позволяющие изменять стиль отображения серии.

<mxc:CartesianLineSeriesView Color="{Binding Color}"
                             ShowMarkers="True"
                             MarkerSize="4"
                             Thickness="2"/>

Например, класс CartesianLineSeriesView предоставляет следующие свойства:

Color — Цвет, которым можно рисовать серию.
CrosshairMode — Указывает, отображать ли интерполированное значение Y или значение Y ближайшей точки, когда функция перекрестия активна, а опция ShowInCrosshair - true.
MarkerSize — определяет размер точечного маркера.
MarkerImage — Позволяет вам указать пользовательское изображение для использования в качестве маркеров точек данных. Чтобы назначить SVG-картинки, используйте объекты класса SvgImage.
MarkerImageCss — CSS-код, позволяющий настраивать цвета элементов на указанной SVG-картинке (MarkerImage).
ShowInCrosshair — Указывает, следует ли отображать значение Y диаграммы на пересечении вертикальной линии перекрестия с графиком.
ShowMarkers — Включает или отключает точечные маркеры.
Thickness — Задает толщину линии.

Создание осей диаграммы¶

Контрол CartesianChart автоматически создает декартовы оси (ось X и ось Y), если вы не задаете их вручную. Если вы хотите настроить оси в XAML, добавьте объекты AxisX и/или AxisY в коллекции CartesianChart.AxesX/CartesianChart.AxesY, а затем измените свойства axis.

 <mxc:CartesianChart Grid.Column="0" Classes="DemoChart" SeriesSource="{Binding Series}" x:Name="chart1">
    <!-- ... -->
    <mxc:CartesianChart.AxesX>
        <mxc:AxisX ShowTitle="True"  />
    </mxc:CartesianChart.AxesX>
    <mxc:CartesianChart.AxesY>
        <mxc:AxisY ShowTitle="False" />
    </mxc:CartesianChart.AxesY>
</mxc:CartesianChart>

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

ConstantLines и ConstantLinesSource — Позволяет рисовать постоянные линии для определенных значений. Смотрите также Strips и StripsSource.
EnableScrolling — Позволяет пользователю прокручивать ось с помощью операции перетаскивания мыши.
EnableZooming — Позволяет пользователю изменять масштаб оси.
MinorCount — Указывает количество второстепенных отметок и линий сетки.
Position — Определяет позицию оси. Доступные опции включают: Near (ось X отображается внизу, а ось Y отображается у левого края диаграммы) и Far (ось X отображается вверху, а ось Y отображается у правого края диаграммы).
Range — Диапазон значений свойств.
ScaleOptions — задает свойства масштабирования.
ShowAxisLine — Определяет видимость линии оси.
ShowInterlacing — Указывает, следует ли рисовать линии чередующихся полос между основными линиями сетки.
ShowLabels — Определяет видимость меток, соответствующих основным отметкам.
ShowMajorGridlines — Определяет видимость линий сетки, соответствующих основным отметкам.
ShowMajorTickmarks — Определяет видимость основных отметок.
ShowMinorGridlines — Определяет видимость линий сетки, соответствующих второстепенным отметкам.
ShowMinorTickmarks — Определяет видимость второстепенных меток.
ShowTitle — определяет видимость заголовка оси (свойство Title).
Strips и StripsSource — Позволяет заполнять диапазоны между определенными значениями. Смотрите также ConstantLines и ConstantLinesSource.
Thickness — Толщина линии оси.
Title — Возвращает или задает заголовок для оси.
TitlePosition — Определяет позицию заголовка оси.

Результат¶

Запустите приложение, чтобы увидеть результат выполнения этого руководства. Контрол CartesianChart отображает два ряда данных, используя представление рядов линий.

charts-get-started-mvvm-two-lines

Полный код¶

Вы можете найти полный код этого руководства в модуле Cartesian Chart→Line демонстрационного приложения.

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