Декартова диаграмма

Контрол CartesianChart позволяет создавать диаграммы, используя декартову систему координат.

Основные функции контрола включают в себя:

• Неограниченное количество рядов данных
• Поддерживаемые типы диаграмм (виды): линия, линия рассеяния, точка (с поддержкой маркеров SVG), область, ступенчатая линия, панель, свеча и многое другое.
• Поддержка нескольких осей
• Несколько типов осей: Числовая, Дата-время, Временной интервал, качественная и логарифмическая
• Одновременная прокрутка и масштабирование по всем осям
• Прокрутка и масштабирование отдельных осей
• Высокая производительность при отображении больших объемов данных
• Визуализация данных в режиме реального времени
• Полосы и постоянные линии
• Использование шаблона проектирования MVVM для предоставления данных и настройки опций диаграммы
• Отображение быстро меняющихся данных в режиме реального времени. Используйте специальный адаптер данных для создания движущегося окна просмотра

Начало работы

• Начало работы с графиками
• Начало работы с графиками - паттерн MVVM

Элементы контрола диаграммы

Основными элементами контрола диаграммы являются ряды и оси.

Series — Предоставляет данные и указывает, как визуализировать эти данные. Вы можете построить столько рядов, сколько вам нужно, в пределах одного контрола диаграммы. Смотрите Серия для получения дополнительной информации.

Axes — Типичная декартова диаграмма отображает две оси: ось X и ось Y. Вы также можете добавить дополнительные оси к диаграмме, когда она отображает два или более рядов. Каждая серия может быть связана со своей собственной осью. Смотрите раздел Оси .

Серия

Ряд предоставляет данные для построения с помощью контрола диаграммы и определяет вид ряда (визуальное представление этих данных).

Класс CartesianSeries инкапсулирует серию для контрола CartesianChart. Чтобы добавить ряды в диаграмму, используйте коллекцию CartesianChart.Series. Вы также можете заполнить диаграмму рядами, используя шаблон проектирования MVVM. Для этой цели используйте свойства CartesianChart.SeriesSource и CartesianChart.SeriesTemplate. Смотрите следующую ссылку для получения дополнительной информации: Начало работы с диаграммами - шаблон MVVM .

Следующий код определяет одну серию в коллекции CartesianChart.Series.

<mxc:CartesianChart>
    <mxc:CartesianChart.Series>
        <mxc:CartesianSeries DataAdapter="{Binding Series.DataAdapter}">
            <mxc:CartesianLineSeriesView Color="{Binding Series.Color}" Thickness="2" />
        </mxc:CartesianSeries>
    </mxc:CartesianChart.Series>
    <!-- ... -->
</mxc:CartesianChart>

Данные серии

Вы можете предоставить данные для серии контролов диаграммы, используя Data Adapters.

<mxc:CartesianSeries DataAdapter="{Binding Series.DataAdapter}">
    <!-- ... -->
</mxc:CartesianSeries>

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

Ниже вы найдете адаптеры данных, сгруппированные по типу значений X:

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

• SortedNumericDataAdapter
• FormulaDataAdapter
• ScatterDataAdapter
• NumericRangeDataAdapter

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

• SortedDateTimeDataAdapter
• DateTimeRangeDataAdapter
• SortedTimeSpanDataAdapter
• TimeSpanRangeDataAdapter
• CandlestickDataAdapter (для Просмотра серии свечей )
• SummaryCandlestickDataAdapter (для Просмотра серии свечей )

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

• QualitativeDataAdapter
• QualitativeRangeDataAdapter

Видимость серии

Используйте свойство Series.Visible, чтобы скрыть серию.

chart1.Series[0].Visible = !chart1.Series[0].Visible;

Просмотры серии

CartesianChart поддерживает несколько видов последовательностей (типов диаграмм):

Просмотр серии линий (объект CartesianLineSeriesView) Строит точки, соединенные линиями.	Просмотр серии линий рассеяния (объект CartesianScatterLineSeriesView) Соединяет точки в том порядке, в котором они отображаются в ряду данных.
Точечный последовательный просмотр (объект CartesianPointSeriesView) Наносит на график отдельные точки.	Просмотр серии областей (объект CartesianAreaSeriesView) Соединяет точки линиями и рисует заполненные области.
Просмотр серии ступенчатых линий (объект CartesianStepLineSeriesView) Соединяет точки отрезками горизонтальной и вертикальной линий.	Последовательный просмотр ступенчатой области (объект CartesianStepAreaSeriesView) Соединяет точки горизонтальными и вертикальными отрезками линий и рисует заполненные области.
Последовательный просмотр области диапазона (объект CartesianRangeAreaSeriesView) Заполняет область между двумя значениями Y в ряду данных.	Просмотр серии панелей (объект CartesianSideBySideBarSeriesView) Визуализирует данные в виде набора прямоугольных панелей.
Просмотр серии панелей диапазона (объект CartesianSideBySideRangeBarSeriesView) Рисует прямоугольные панели между двумя значениями Y ряда данных.	Просмотр серии свечей (Объект CartesianCandlestickSeriesView) Финансовая диаграмма, описывающая движение цены актива. Для каждой точки данных на графике отображается набор из четырех значений: цены открытия, закрытия, Максимума и минимума.
Просмотр серии Lollipop (объект CartesianLollipopSeriesView) Представляет данные в виде точек (маркеров), соединенных тонкими линиями с горизонтальной или вертикальной осью.

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

В следующем примере ряду присваивается "Вид серии линий".

<mxc:CartesianSeries DataAdapter="{Binding Series.DataAdapter}">
    <mxc:CartesianLineSeriesView Color="{Binding Series.Color}" Thickness="2" />
</mxc:CartesianSeries>

Оси

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

<mxc:CartesianChart>
    <!-- ... -->

    <mxc:CartesianChart.AxesX>
        <mxc:AxisX ShowTitle="False">
        </mxc:AxisX>
    </mxc:CartesianChart.AxesX>

    <mxc:CartesianChart.AxesY>
        <mxc:AxisY Title="t(°C)" TitlePosition="WithLabels">
            <mxc:AxisYRange AlwaysShowZeroLevel="False" />
        </mxc:AxisY>
    </mxc:CartesianChart.AxesY>
</mxc:CartesianChart>

Диапазон значений оси

Поместите объекты AxisXRange/AxisYRange в качестве содержимого объектов AxisX/AxisY, чтобы указать свойства диапазона осей. Объекты AxisXRange/AxisYRange позволяют настраивать общий диапазон значений, диапазон видимых значений, видимость нулевого уровня и т.д.

<mxc:CartesianChart.AxesX>
    <mxc:AxisX ShowTitle="False" >
        <mxc:AxisXRange MinSideMargin="0.15" MaxSideMargin="0.15"/>
    </mxc:AxisX>
</mxc:CartesianChart.AxesX>
<mxc:CartesianChart.AxesY>
    <mxc:AxisY Title="Amplitude (dB SPL)">
        <mxc:AxisYRange AlwaysShowZeroLevel="False" />
    </mxc:AxisY>
</mxc:CartesianChart.AxesY>

• AutoCorrectWholeRange (по умолчанию — true) - Возвращает или устанавливает, будет ли общий диапазон осей рассчитываться автоматически на основе данных серии.

Чтобы задать пользовательский общий диапазон осей, отключите опцию AutoCorrectWholeRange, а затем используйте свойства WholeMin и WholeMax.

• SynchronizeVisualRange — Определяет, будет ли диапазон видимых осей равен общему диапазону осей при изменении последнего.

• AlwaysShowZeroLevel (только для объектов AxisYRange) (по умолчанию используется true) — Возвращает или устанавливает, будет ли общий диапазон осей автоматически корректироваться с учетом нулевого уровня. Смотрите WholeMax.

• WholeMax — Возвращает или задает максимальное значение общего диапазона осей. Свойство WholeMin определяет минимальное значение.

  Отключите свойство AutoCorrectWholeRange, чтобы использовать свойства WholeMin и WholeMax.

  Если опция AlwaysShowZeroLevel включена (дефолтное поведение), нулевой уровень принудительно включается в общий диапазон осей.

Пример - Отображение и скрытие нулевого уровня

Consider the following example in which the `WholeMin` and `WholeMax` properties define custom bounds for the total axis range. The range automatically includes the zero level because the `AlwaysShowZeroLevel` property is enabled.

``` xml
<mxc:CartesianChart.AxesY>
    <mxc:AxisY ShowTitle="False">
        <mxc:AxisYRange WholeMin="100" WholeMax="350" AutoCorrectWholeRange="False" AlwaysShowZeroLevel="True" />
    </mxc:AxisY>
</mxc:CartesianChart.AxesY>
```
![chart-axisrange-example-AlwaysShowZeroLevel-true](../../images/chart-axisrange-example-AlwaysShowZeroLevel-true.png)


Disable the `AlwaysShowZeroLevel` property to limit the total axis range by the `WholeMin` and `WholeMax` properties, while ignoring the zero level.

``` xml
<mxc:AxisYRange WholeMin="100" WholeMax="350" AutoCorrectWholeRange="False" AlwaysShowZeroLevel="False" />
```

![chart-axisrange-example-AlwaysShowZeroLevel-false](../../images/chart-axisrange-example-AlwaysShowZeroLevel-false.png)

• WholeMin — Возвращает или устанавливает минимальное значение общего диапазона осей. Дополнительную информацию смотрите в WholeMax.
• VisualMax — Возвращает или устанавливает максимальное значение видимого в данный момент диапазона осей. Свойство VisualMin определяет минимальное значение.

• VisualMin — Возвращает или устанавливает минимальное значение видимого в данный момент диапазона осей.

• MaxSideMargin — Возвращает или устанавливает количество пустого пространства после самой правой/самой верхней точки данных диаграммы.

• MinSideMargin — Возвращает или устанавливает количество пустого пространства перед самой левой/самой нижней точкой данных диаграммы.

Масштаб по оси

Осевая шкала определяет тип единиц измерения и различные опции отображения по оси. На картинке ниже показано несколько типов шкал:

Чтобы задать свойства масштаба для осей, используйте свойства AxisX.ScaleOptions и AxisY.ScaleOptions.

Настройка свойств масштаба для оси X

Используйте свойство AxisX.ScaleOptions, чтобы изменить свойства масштаба для оси X. Это свойство относится к базовому типу ScaleOptions.

Чтобы изменить свойства масштаба, присвойте свойству AxisX.ScaleOptions значение одного из следующих объектов в зависимости от типа значений X серии:

• NumericScaleOptions — Числовая шкала данных. Используйте этот тип шкалы, если значения X, указанные в серии, являются числовыми значениями.

  <mxc:AxisX Title="Frequency">
      <mxc:AxisX.ScaleOptions>
          <mxc:NumericScaleOptions 
              LogarithmicBase="{Binding AxisX.LogarithmicBase}"
              LabelFormatter="{Binding FrequencyFormatter}" />
      </mxc:AxisX.ScaleOptions>
  </mxc:AxisX>
  

• DateTimeScaleOptions — шкала данных даты и времени. Используйте этот тип шкалы, если значения X, указанные в серии, являются значениями DateTime. Свойство DateTimeScaleOptions.MeasureUnit позволяет указать единицу измерения времени (axis unit) для масштаба оси: Millisecond, Second, Minute, Hour, Day, Week, Month, Quarter или Year

  <mxc:AxisX ShowTitle="False">
      <mxc:AxisX.ScaleOptions>
          <mxc:DateTimeScaleOptions MeasureUnit="Day" />
      </mxc:AxisX.ScaleOptions>
  </mxc:AxisX>
  

• TimeSpanScaleOptions — Шкала данных о временном интервале. Используйте этот тип шкалы, если значения X, указанные в серии, являются значениями TimeSpan. Свойство TimeSpanScaleOptions.MeasureUnit позволяет указать единицу измерения времени для шкалы осей: Millisecond, Second, Minute, Hour или Day.

  <mxc:AxisX>
      <mxc:AxisX.ScaleOptions>
          <mxc:TimeSpanScaleOptions MeasureUnit="Minute" />
      </mxc:AxisX.ScaleOptions>
  </mxc:AxisX>
  

• QualitativeScaleOptions — Шкала качественных данных. Используйте этот тип шкалы, если значения X, представленные в серии, являются качественными значениями (текстовыми строками).

  <mxc:AxisX >
      <mxc:AxisX.ScaleOptions>
          <mxc:QualitativeScaleOptions GridSpacing="1" />
      </mxc:AxisX.ScaleOptions>
  </mxc:AxisX>
  

Настройка свойств масштаба для оси Y

Используйте свойство AxisY.ScaleOptions, чтобы изменить свойства масштаба оси Y. Это свойство относится к типу NumericScaleOptions.

<mxc:AxisY Title="Amplitude (dB SPL)">
    <mxc:AxisY.ScaleOptions>
        <mxc:NumericScaleOptions LabelFormatter="{Binding MyCustomLabelFormatter}"/>
    </mxc:AxisY.ScaleOptions>
</mxc:AxisY>

Метки оси формата

Свойство ScaleOptions.LabelFormatter позволяет указать объект, который форматирует значения отображения оси произвольным способом. Вы можете реализовать пользовательский форматировщик меток на основе функции/выражения, используя объект Eremex.AvaloniaUI.Charts.FuncLabelFormatter.

В следующем примере реализован пользовательский форматировщик меток для значений DateTime.

<mxc:AxisX Name="salesAxis" Title="Sales">
    <mxc:AxisX.ScaleOptions>
        <mxc:DateTimeScaleOptions MeasureUnit="Month" LabelFormatter="{Binding MonthFormatter}" />
    </mxc:AxisX.ScaleOptions>
</mxc:AxisX>

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

Смотрите также: Форматирование значений в метках диаграммы перекрестий

Множество осей

Типичная декартова диаграмма имеет одну ось X и одну ось Y. При необходимости вы можете добавить любое количество дополнительных осей X и Y. Это полезно, когда вы отображаете несколько серий и хотите отобразить собственную ось X и/или Y для каждой серии.

Чтобы связать ряд с осью, выполните следующие действия:

• Установите для свойства Axis.Key оси значение уникального идентификатора (строка).
• Установите для свойства AxisXKey/AxisYKey серии значение, равное значению свойства Axis.Key.

В следующем примере добавлена ось X и привязана к серии lineSeries.

<mxc:CartesianSeries Name="lineSeries" DataAdapter="{Binding LineSeries.DataAdapter}"  
  AxisXKey="lineSeriesAxis">
    <mxc:CartesianLineSeriesView Color="{Binding LineSeries.Color}" />
</mxc:CartesianSeries>

<mxc:CartesianChart.AxesX>
    <!-- ... -->
    <mxc:AxisX Position="Far" Title="Expenses"
       Key="lineSeriesAxis">
        <mxc:AxisX.ScaleOptions>
            <mxc:NumericScaleOptions />
        </mxc:AxisX.ScaleOptions>
    </mxc:AxisX>
</mxc:CartesianChart.AxesX>

Прокрутка и масштабирование

Пользователи могут увеличивать и прокручивать весь вид и отдельные оси с помощью мыши. Они также могут увеличивать изображение до определенного прямоугольника или диапазона значений.

Одновременная прокрутка и масштабирование по всем осям

Прокрутка и масштабирование отдельных осей

Увеличение масштаба в определенной области и диапазоне значений оси

Смотрите следующий раздел для получения дополнительной информации: Прокрутка и масштабирование контрола диаграммы

Свойства осей

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

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

Постоянные линии и полоски

Контрол CartesianChart включает в себя поддержку постоянных линий и полосок. Они позволяют вам выделять конкретные значения и диапазоны значений вдоль осей.

Постоянные линии

Постоянные линии - это вертикальные или горизонтальные линии, которые проводятся перпендикулярно осям. Они служат визуальными маркерами для выделения определенных значений вдоль осей. Используйте свойство Axis.ConstantLines или Axis.ConstantLinesSource, чтобы указать постоянные линии. Каждая постоянная линия инкапсулируется объектом ConstantLine.

Следующий код создает горизонтальную постоянную линию, которая указывает значение 85 вдоль оси Y.

<mxc:CartesianChart.AxesY>
    <mxc:AxisY Title="t(°C)" TitlePosition="WithLabels">
        <mxc:AxisY.ConstantLines>
            <mxc:ConstantLine Title="Overheat 85°C" AxisValue="85" Color="#BD1436"/>
        </mxc:AxisY.ConstantLines>
    </mxc:AxisY>
</mxc:CartesianChart.AxesY>

Свойство Axis.ConstantLinesSource позволяет инициализировать постоянные линии из коллекции объектов, определенных в модели представления. Чтобы создать объекты ConstantLine из нижележащих объектов данных, используйте свойство Axis.ConstantLineTemplate для указания шаблона. Смотрите демонстрацию Strips and Constant Lines для примера.

Свойства постоянных линий

• ConstantLine.AxisValue — значение оси, связанное с постоянной линией.
• ConstantLine.Color — Цвет, которым рисуем постоянную линию.
• ConstantLine.ShowBehind — Указывает, следует ли рисовать постоянную линию ниже (по умолчанию) или над рядом.
• ConstantLine.ShowTitle — Указывает, показывать (по умолчанию) или скрывать заголовок (смотрите опцию Title).
• ConstantLine.Thickness — Толщина постоянной линии.
• ConstantLine.Title — Заголовок, который нужно рисовать рядом с постоянной линией. Опция TitlePosition определяет позицию заголовка.
• ConstantLine.TitleIndent — Расстояние заголовка по горизонтали и вертикали от линии.
• ConstantLine.TitlePosition — Расположение заголовка относительно линии. Доступные опции включают: NearAboveLine, NearBelowLine, FarAboveLine и FarBelowLine.

Постоянные полосы

Постоянные полосы позволяют выделять определенные диапазоны значений вдоль осей. Подобно постоянным линиям, полосы рисуются перпендикулярно осям. Вы можете указать полосы, используя свойства Axis.Strips и Axis.StripsSource. Каждая полоса инкапсулирована объектом Strip.

Следующий код создает полосу, которая выделяет диапазон значений Y от 40 до 65. Полоска заполнена полупрозрачным светло-зеленым цветом. Обратите внимание, что если вы используете непрозрачный цвет для полосы, он скроет линии сетки контрола диаграммы.

<mxc:CartesianChart.AxesY>
    <mxc:AxisY Title="t(°C)" TitlePosition="WithLabels">
        <mxc:AxisY.Strips>
            <mxc:Strip AxisValue1="40" AxisValue2="65" Color="#4043C927" />
        </mxc:AxisY.Strips>
    </mxc:AxisY>
</mxc:CartesianChart.AxesY>

Свойство Axis.StripsSource позволяет вам инициализировать полосы из коллекции объектов, определенных в модели представления. Чтобы создать объекты Strip из нижележащих объектов данных, используйте свойство Axis.StripTemplate для указания шаблона.

Свойства полосы

• ConstantLine.AxisValue1 — Указывает первое (начальное или конечное) значение диапазона вдоль оси
• ConstantLine.AxisValue2 — указывает второе (конечное или начальное) значение диапазона вдоль оси.

• ConstantLine.Color — Цвет, используемый для заливки полосы.

  Совет

  Use a semi-transparent color to allow grid lines to be seen beneath the strip.

Перекрестие

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

Чтобы настроить свойства отображения перекрестия или отключить эту функцию, инициализируйте свойство CartesianChart.CrosshairOptions экземпляром класса Eremex.AvaloniaUI.Charts.CrosshairOptions. Затем используйте свойства, предоставляемые классом CrosshairOptions, чтобы настроить свойства перекрестия по мере необходимости.

Отключите перекрестие

Свойство CrosshairOptions.ShowCrosshair позволяет отключить перекрестие.

<mxc:CartesianChart x:Name="chartControl1" >
    <mxc:CartesianChart.CrosshairOptions>
        <mxc:CrosshairOptions ShowCrosshair="False"/>
    </mxc:CartesianChart.CrosshairOptions>
    <!-- ... -->
</mxc:CartesianChart>

Отключите отдельные линии и метки осей перекрестия

Свойства CrosshairOptions.ShowArgumentLine и CrosshairOptions.ShowValueLine можно использовать для скрытия вертикальной и горизонтальной линии перекрестия соответственно. Чтобы предотвратить отображение меток перекрестия для осей X и Y, используйте свойства CrosshairOptions.ShowArgumentLabel и CrosshairOptions.ShowValueLabel.

В следующем примере вертикальная линия перекрестия и метка для оси X скрыты:

<mxc:CartesianChart x:Name="chartControl1" >
    <mxc:CartesianChart.CrosshairOptions>
        <mxc:CrosshairOptions ShowArgumentLabel="False" ShowValueLabel="False"/>
    </mxc:CartesianChart.CrosshairOptions>
    <!-- ... -->
</mxc:CartesianChart>

Настройка меток диаграммы перекрестий

Метки диаграммы перекрестий отображают названия и текущие значения рядов.

Форматирование значений в метках диаграммы перекрестий

Значения, отображаемые в метках диаграммы перекрестий, изначально используют форматы по умолчанию:

Чтобы отформатировать эти значения произвольным способом, создайте объект formatter и назначьте его свойству Axis.ScaleOptions.CrosshairLabelFormatter. Значения оси могут быть отформатированы аналогичным образом (смотрите свойство Axis.ScaleOptions.LabelFormatter).

Вы можете реализовать пользовательский форматировщик меток на основе функции/выражения, используя объект Eremex.AvaloniaUI.Charts.FuncLabelFormatter.

В следующем примере создается объект formatter, который форматирует числовые значения как валюту. Этот форматировщик используется для форматирования меток оси Y и значений в метке диаграммы перекрестий.

<mxc:CartesianChart.AxesY>
    <mxc:AxisY Title="Payment">
        <mxc:AxisY.ScaleOptions>
            <mxc:NumericScaleOptions
                CrosshairLabelFormatter="{Binding CurrencyFormatter}"
                LabelFormatter="{Binding CurrencyFormatter}"/>
        </mxc:AxisY.ScaleOptions>
    </mxc:AxisY>
</mxc:CartesianChart.AxesY>

public partial class MainViewModel : ViewModelBase 
{
[ObservableProperty] 
FuncLabelFormatter currencyFormatter = new(o => String.Format("{0:c}", o));
}

Скрыть серию в перекрестии

Свойство CrosshairSeriesViewBase.ShowInCrosshair представления серии определяет видимость этой серии в метке диаграммы перекрестий.

Следующий кодовый код определяет две серии (Interest и Principal). Свойство ShowInCrosshair, установленное в значение false, скрывает первую серию в перекрестии:

<mxc:CartesianChart.Series>
    <mxc:CartesianSeries DataAdapter="{Binding InterestSeriesDataAdapter}" SeriesName="Interest">
        <mxc:CartesianAreaSeriesView Color="#F9A825" Transparency="0.2" 
          MarkerSize="2" ShowMarkers="True"
          ShowInCrosshair="False" />
    </mxc:CartesianSeries>

    <mxc:CartesianSeries DataAdapter="{Binding PrincipalSeriesDataAdapter}" SeriesName="Principal">
        <mxc:CartesianAreaSeriesView Color="#2E7D32" Transparency="0.2" MarkerSize="2" ShowMarkers="True" />
    </mxc:CartesianSeries>
</mxc:CartesianChart.Series>

Горизонтальный отступ метки диаграммы перекрестия

Свойство CrosshairOptions.SeriesLabelIndent позволяет регулировать расстояние по горизонтали между меткой диаграммы перекрестия и вертикальной линией перекрестия. Значение свойства по умолчанию равно 2.

<mxc:CartesianChart.CrosshairOptions>
    <mxc:CrosshairOptions SeriesLabelIndent="30"/>
</mxc:CartesianChart.CrosshairOptions>

Отображение точного или интерполированного значения в метках диаграммы перекрестий

Декартова диаграмма поддерживает ряды, состоящие из отсортированных дискретных точек данных. Для этих рядов линии пересечения не всегда пересекают точки данных, но чаще всего отображаются между ними. Вы можете использовать свойство CartesianSortedLineSeriesView.CrosshairMode, чтобы указать, привязывается ли метка диаграммы перекрестия к ближайшей точке данных или отображает интерполированное значение. Доступны следующие опции:

• CrosshairSeriesMode.Point — Метка диаграммы перекрестия привязывается к ближайшей точке данных и отображает ее значение.

• CrosshairSeriesMode.Interpolate — Метка диаграммы перекрестия отображает интерполированное значение точки на пересечении вертикальной линии перекрестия с диаграммой.

Следующий код показывает, как настроить опцию CrosshairMode:

<mxc:CartesianChart.Series>
    <mxc:CartesianSeries DataAdapter="{Binding Series.DataAdapter}">
        <mxc:CartesianLineSeriesView Color="{Binding Series.Color}" Thickness="2" CrosshairMode="Interpolate"/>
    </mxc:CartesianSeries>
</mxc:CartesianChart.Series>

Настройка меток диаграммы перекрестий для нескольких серий

Если декартова диаграмма содержит несколько рядов, в перекрестии отображается метка диаграммы для каждого ряда:

Используйте свойство CrosshairOptions.SeriesLabelMode, чтобы указать режим отображения меток диаграммы для нескольких рядов. Доступны следующие опции:

• CrosshairSeriesLabelMode.ForEachSeries — Для каждой серии отображается метка диаграммы перекрестий.

• CrosshairSeriesLabelMode.ForNearestSeries — Для ближайшей серии отображается метка диаграммы с перекрестием.

• CrosshairSeriesLabelMode.OneForAllSeries — Перекрестие отображает одну метку диаграммы, которая объединяет информацию о значениях всех рядов.

Ниже приведен пример, который позволяет использовать одну метку диаграммы с перекрестием в случае нескольких рядов.

<mxc:CartesianChart.CrosshairOptions>
    <mxc:CrosshairOptions SeriesLabelMode="OneForAllSeries"/>
</mxc:CartesianChart.CrosshairOptions>

Настройка линий пересечения и меток осей X и Y

Объект CrosshairOptions контрола диаграммы содержит набор свойств, которые позволяют изменять визуальные свойства линий перекрестия, метки оси X и метки оси Y.

• ArgumentColor — цвет фона меток оси перекрестия X.
• ArgumentLineThickness — Толщина линии аргумента перекрестия.
• ArgumentTextColor — цвет переднего плана (текста) меток оси перекрестия X.
• ValueColor — цвет фона меток оси перекрестия Y.
• ValueLineThickness — толщина линии значения перекрестия.
• ValueTextColor — цвет переднего плана (текста) меток оси перекрестия Y.

Следующий код XAML демонстрирует, как настроить эти свойства для примера контрола диаграммы. Свойству толщины линии перекрестия присвоено значение 3. Метки перекрестия имеют серый фон, но разные цвета текста: желтый для меток по оси X и голубой для меток по оси Y.

<mxc:CartesianChart ...>
    <mxc:CartesianChart.CrosshairOptions>
        <mxc:CrosshairOptions 
            ArgumentColor="Gray" ArgumentTextColor="Yellow" ArgumentLineThickness="3"
            ValueColor="Gray" ValueTextColor="Cyan" ValueLineThickness="3" />
    </mxc:CartesianChart.CrosshairOptions>
</mxc:CartesianChart>

Преобразование координат диаграммы в координаты экрана

Иногда вам может потребоваться перевести координаты с диаграммы на экранные координаты и наоборот. Следующие методы позволят вам выполнить эту задачу:

• CartesianChart.DiagramPointToScreenPoint — Преобразует координаты точки на графике в экранные координаты. Точка на графике определяется по осям X и Y и значениям вдоль этих осей.
• CartesianChart.ScreenPointToDiagramPoint — Преобразует экранные координаты в координаты точки внутри контрола диаграммы. Объект, возвращаемый методом, позволяет вам получить координаты диаграммы или определить, находятся ли координаты экрана в пределах области просмотра контрола.

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