Skip to content

Серия Столбчатые диаграммы

Последовательный просмотр панелей "Бок о бок" (CartesianSideBySideBarSeriesView) позволяет визуализировать данные в виде набора прямоугольных панелей. Если вы предоставляете несколько рядов, данные визуализируются в виде расположенных бок о бок панелей вдоль горизонтальной оси.

chart-views-barseriesview

Создание последовательного просмотра параллельных панелей

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

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

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

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

<mxc:CartesianChart x:Name="chartControl">
    <mxc:CartesianChart.Series>
        <mxc:CartesianSeries Name="barSeries1" DataAdapter="{Binding DataAdapter}" >
            <mxc:CartesianSideBySideBarSeriesView Color="Red" />
        </mxc:CartesianSeries>
</mxc:CartesianChart>

using Eremex.AvaloniaUI.Charts;

CartesianSeries series = new CartesianSeries();
chartControl.Series.Add(series);
DateTime[] args = new DateTime[] {DateTime.Today, DateTime.Today.AddMonths(1)};
double[] values = new double[] {10, 20};
series.DataAdapter = new SortedDateTimeDataAdapter(args, values );
series.View = new CartesianSideBySideBarSeriesView()
{
    Color = Avalonia.Media.Colors.Red
};

Совет

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 с двумя последовательными видами панелей, расположенными бок о бок. Данные для последовательных представлений панелей предоставляются объектами SortedDateTimeDataAdapter, инициализированными в модели основного представления. Подразумевается, что объект MainWindowViewModel задан в качестве контекста данных для окна.

В примере показано, как инициализировать цвет, ширину панели и расстояние между панелями для объектов CartesianSideBySideBarSeriesView.

Оси X и Y создаются в XAML для выполнения настройки их свойств (включая опции заголовка и масштаба).

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

chart-views-barseriesview-example

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

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

    <mxc:CartesianChart x:Name="chartControl">
        <mxc:CartesianChart.Series>
            <mxc:CartesianSeries Name="barSeries1" DataAdapter="{Binding BarSeries1.DataAdapter}" >
                <mxc:CartesianSideBySideBarSeriesView Color="{Binding BarSeries1.Color}" BarWidth="0.9" BarDistanceFixed="1" />
            </mxc:CartesianSeries>
            <mxc:CartesianSeries Name="barSeries2" DataAdapter="{Binding BarSeries2.DataAdapter}" >
                <mxc:CartesianSideBySideBarSeriesView Color="{Binding BarSeries2.Color}" BarWidth="0.9" />
            </mxc:CartesianSeries>
        </mxc:CartesianChart.Series>

        <mxc:CartesianChart.AxesX>
            <mxc:AxisX Name="salesAxis" Title="Months">
                <mxc:AxisX.ScaleOptions>
                    <mxc:DateTimeScaleOptions MeasureUnit="Month"  LabelFormatter="{Binding MonthFormatter}"/>
                </mxc:AxisX.ScaleOptions>
            </mxc:AxisX>
        </mxc:CartesianChart.AxesX>
        <mxc:CartesianChart.AxesY>
            <mxc:AxisY Title="Sales"/>
        </mxc:CartesianChart.AxesY>
    </mxc:CartesianChart>
</mx:MxWindow>

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

namespace ChartBarSeriesView.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty] SeriesViewModel barSeries1;
    [ObservableProperty] SeriesViewModel barSeries2;
    [ObservableProperty] FuncLabelFormatter monthFormatter = new(o => String.Format("{0:MMM} {0:yy}", o));

    public MainWindowViewModel()
    {
        var random = new Random(11);
        var startDate = new DateTime(DateTime.Now.Year, 1, 1);
        SortedDateTimeDataAdapter barSeries1DataAdapter = new();
        SortedDateTimeDataAdapter barSeries2DataAdapter = new();
        for (int i = 0; i < 12; i++)
        {
            var argument = startDate.AddMonths(i);
            barSeries1DataAdapter.Add(argument, random.NextDouble() * 100 - 30);
            barSeries2DataAdapter.Add(argument, random.NextDouble() * 100 - 30);
        }
        // Create data series
        BarSeries1 = new() { Color = Color.FromUInt32(0xffe07a5f), DataAdapter = barSeries1DataAdapter };
        BarSeries2 = new() { Color = Color.FromUInt32(0xff3D405B), DataAdapter = barSeries2DataAdapter };
    }
}

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

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

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

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

  • SortedNumericDataAdapter
  • FormulaDataAdapter

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

  • SortedDateTimeDataAdapter
  • SortedTimeSpanDataAdapter

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

  • QualitativeDataAdapter

Свойства просмотра серии панелей

  • CartesianSideBySideBarSeriesView.BarDistanceFixed — Ширина пустого пространства справа от панелей, принадлежащих текущему виду серии панелей. Свойство BarDistanceFixed позволяет регулировать расстояние между панелями разных серий.
  • CartesianSideBySideBarSeriesView.BarWidth — Ширина панелей в текущем представлении серии панелей.
  • CartesianSideBySideBarSeriesView.BorderColor — Цвет границы для панелей.
  • CartesianSideBySideBarSeriesView.BorderThickness — Толщина границ панели.
  • CartesianSideBySideBarSeriesView.Color — Цвет заливки для панелей.



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