21

Хочу реализовать отображение графиков используя wpf.

Приблизительно как на картинке. Интересует только View(разметка xaml).

Массив на вход: list<datetime,price>. Price содержит: open price, close price.

пример чарта

Как это можно отобразить во View? Не используя сторонние библиотеки?

P. S. Смотрел на stackoverflow — данная тема поднималась уже много раз и много лет. Но нигде не было ни одного рабочего примера. Только ответы в духе: «это сложно», «за вас никто не сделает».

Поэтому критерием закрытия темы объявляю реальный рабочий пример! Давайте добьем эту задачу! Кто то ленится, а кто-то просто не может сделать — отнеситесь с пониманием.

8
  • 3
    Примечание: кроме open и close, вам ещё нужны значения high и low. 9 мар 2018 в 15:07
  • 7
    Давайте так. Если хочется самому - тогда вопрос слишком широкий, закрыть. Если нужны либы - то вот вопрос-дубликат, один-в-один, даже график абсолютно одинаковый. И вот ещё самопал, но обратите внимание - совершенно конкретный вопрос, а не "как это вообще делается". Не знаете совсем как делать - открыли любую готовую библиотеку и посмотрели, как сделано - пошли делать по аналогии.
    – A K
    9 мар 2018 в 15:25
  • 3
    Редко ставлю "-", но это один из тех случаев. Если вы хотите, чтобы за вас сделали всю работу, то вы не по адресу. Если проблемы с конкретной частью - пожалуйста отредактируйте вопрос и я с удовольствием поставлю вопросу "+"
    – user227049
    9 мар 2018 в 18:13
  • 3
    Специально для этой цели уже придуманы библиотеки и хостинги/репозитории для них. Технически, на этот вопрос возможно ответить, скопировав код библиотеки с гитхаба и дополнив кодом под библиотеку, что делает требование "без библиотек" бессмысленным, а вопрос дубликатом.
    – user181100
    11 мар 2018 в 17:55
  • 2
    Гы, вопрос сначала ушёл в –9, а сейчас уже +5. Не видать мне значка Reversal. 😆
    – Kyubey
    13 мар 2018 в 3:21

1 ответ 1

32
+500

Не понимаю, что развели за разборки: сложно, невозможно, много кода... Фыр. Это же WPF, тут всё просто.

Для начала сгенерируем случайные данные:

using System;
using System.Collections.Generic;
using System.Linq;
using static System.Math;

namespace CandlestickChartApp
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            DataContext = new Candlestick();
            InitializeComponent();
        }
    }

    public class Candlestick
    {
        private const int PriceCount = 500;
        private const int PricesPerCandle = 10;

        public List<Price> Prices { get; } = new List<Price>(PriceCount + 1);
        public List<Candle> Candles { get; } = new List<Candle>(PriceCount / PricesPerCandle);
        public List<double> Labels { get; } = new List<double>();
        public double PriceCurrent { get; }
        public double PriceMin { get; }
        public double PriceMax { get; }
        public double PriceHeight { get; }

        public Candlestick()
        {
            var rnd = new Random(1);
            var today = DateTime.Today;
            var date = DateTime.Today;
            var value = 300;
            for (var i = 0; i < Prices.Capacity; i++)
                Prices.Add(new Price { Date = date = date.AddMinutes(5), Value = value += rnd.Next(-9, 10) });
            for (var i = 0; i < Candles.Capacity; i++) {
                var prices = Prices.Select(p => p.Value).Skip(i * PricesPerCandle).Take(PricesPerCandle + 1);
                Candles.Add(new Candle {
                    Date = (Prices[i * PricesPerCandle].Date - today).TotalMinutes / 5,
                    Min = prices.Min(), Max = prices.Max(), Height = prices.Max() - prices.Min(),
                    DeltaMin = prices.First(), DeltaMax = prices.Last(), DeltaHeight = Abs(prices.Last() - prices.First()),
                    IsPositive = prices.First() < prices.Last(),
                });
            }
            Candles.ForEach(c => c.Fix());
            PriceCurrent = Prices.Last().Value;
            PriceMin = Prices.Min(p => p.Value) - 20;
            PriceMax = Prices.Max(p => p.Value) + 20;
            PriceHeight = PriceMax - PriceMin - 40;
            for (double price = Round(PriceMin / 10) * 10; price < PriceMax; price += 50)
                Labels.Add(price);
        }
    }

    public class Price
    {
        public DateTime Date { get; set; }
        public double Value { get; set; }
    }

    public class Candle
    {
        public double Date { get; set; }
        public double Min { get; set; }
        public double Max { get; set; }
        public double Height { get; set; }
        public double DeltaMin { get; set; }
        public double DeltaMax { get; set; }
        public double DeltaHeight { get; set; }
        public bool IsPositive { get; set; }

        public void Fix()
        {
            if (!IsPositive) {
                var min = DeltaMin;
                DeltaMin = DeltaMax;
                DeltaMax = min;
            }
        }
    }
}

А потом остаётся только описать несколько шаблонов и стилей:

<Window x:Class="CandlestickChartApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:my="clr-namespace:CandlestickChartApp"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Height="400" Width="650" Background="DarkSlateBlue"
        d:DataContext="{d:DesignInstance my:Candlestick}" mc:Ignorable="d">
    <Control.Resources>
        <ScaleTransform x:Key="trfFlip" ScaleY="-1" />
        <ItemsPanelTemplate x:Key="tplCanvas">
            <Canvas />
        </ItemsPanelTemplate>
        <Style x:Key="styFlipContainer" TargetType="FrameworkElement">
            <Setter Property="RenderTransformOrigin" Value=".5 .5" />
            <Setter Property="RenderTransform" Value="{StaticResource trfFlip}" />
        </Style>
        <Style TargetType="ItemsControl" BasedOn="{StaticResource styFlipContainer}">
            <Setter Property="ItemsPanel" Value="{StaticResource tplCanvas}" />
        </Style>
        <Style TargetType="Canvas" BasedOn="{StaticResource styFlipContainer}"/>
        <DataTemplate x:Key="tplLabel" DataType="sys:Double">
            <TextBlock Text="{Binding ., StringFormat=0.0}" Margin="0 8 0 -8" Foreground="DarkGray" RenderTransform="{StaticResource trfFlip}" />
        </DataTemplate>
        <Style x:Key="styLabel" TargetType="ContentPresenter">
            <Setter Property="Canvas.Top" Value="{Binding}" />
        </Style>
        <Style x:Key="styLabelLeft" TargetType="ContentPresenter" BasedOn="{StaticResource styLabel}">
            <Setter Property="Canvas.Right" Value="10" />
        </Style>
        <Style x:Key="styLabelRight" TargetType="ContentPresenter" BasedOn="{StaticResource styLabel}">
            <Setter Property="Canvas.Left" Value="10" />
        </Style>
        <DataTemplate x:Key="tplLineHorizontal" DataType="sys:Double">
            <Rectangle Stroke="Gray" StrokeDashArray="4 8" StrokeThickness="1" Width="500" Height="1" />
        </DataTemplate>
        <Style x:Key="styCandle" TargetType="Shape" d:DataContext="{d:DesignInstance my:Candle}">
            <Setter Property="Stroke" Value="OrangeRed" />
            <Setter Property="Fill" Value="DarkRed" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsPositive}" Value="True">
                    <Setter Property="Stroke" Value="LawnGreen" />
                    <Setter Property="Fill" Value="ForestGreen" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate x:Key="tplCandleLine" DataType="my:Candle">
            <Rectangle Style="{StaticResource styCandle}" Width="2" Height="{Binding Height}" />
        </DataTemplate>
        <Style x:Key="styCandleLine" TargetType="ContentPresenter" d:DataContext="{d:DesignInstance my:Candle}">
            <Setter Property="Canvas.Left" Value="{Binding Date}" />
            <Setter Property="Canvas.Top" Value="{Binding Min}" />
        </Style>
        <DataTemplate x:Key="tplCandleRect" DataType="my:Candle">
            <Rectangle Style="{StaticResource styCandle}" Width="6" Height="{Binding DeltaHeight}" Margin="-2 0 2 0" />
        </DataTemplate>
        <Style x:Key="styCandleRect" TargetType="ContentPresenter" d:DataContext="{d:DesignInstance my:Candle}">
            <Setter Property="Canvas.Left" Value="{Binding Date}" />
            <Setter Property="Canvas.Top" Value="{Binding DeltaMin}" />
        </Style>
    </Control.Resources>
    <Grid Height="{Binding PriceHeight}" Margin="0 70 0 -70">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="500" />
            <ColumnDefinition Width="50" />
        </Grid.ColumnDefinitions>
        <ItemsControl Grid.Column="0" ItemsSource="{Binding Labels}"
                ItemTemplate="{StaticResource tplLabel}" ItemContainerStyle="{StaticResource styLabelLeft}" />
        <ItemsControl Grid.Column="1" ItemsSource="{Binding Labels}"
                ItemTemplate="{StaticResource tplLineHorizontal}" ItemContainerStyle="{StaticResource styLabel}" />
        <ItemsControl Grid.Column="1" ItemsSource="{Binding Candles}"
                ItemTemplate="{StaticResource tplCandleLine}" ItemContainerStyle="{StaticResource styCandleLine}" />
        <ItemsControl Grid.Column="1" ItemsSource="{Binding Candles}"
                ItemTemplate="{StaticResource tplCandleRect}" ItemContainerStyle="{StaticResource styCandleRect}" />
        <ItemsControl Grid.Column="2" ItemsSource="{Binding Labels}"
                ItemTemplate="{StaticResource tplLabel}" ItemContainerStyle="{StaticResource styLabelRight}" />
        <Canvas Grid.Column="1">
            <Rectangle Canvas.Top="{Binding PriceCurrent}" Stroke="LightGray" Width="500" Height="2" />
        </Canvas>
        <Canvas Grid.Column="2">
            <Border Canvas.Top="{Binding PriceCurrent}" Margin="6 10 0 -10"
                    Background="LightGray" CornerRadius="3" RenderTransform="{StaticResource trfFlip}">
                <TextBlock Text="{Binding PriceCurrent, StringFormat=0.0}" Foreground="DimGray" Margin="4 2" />
            </Border>
        </Canvas>
    </Grid>
</Window>

И пожалуйста:

Даты преобразуются к double, чтобы использовать как координату X. Цены генерируются в виде double и используются как Y (в доменной области они должны быть decimal).

Списки свечек и надписей служат источником элементов для ItemsControl. В качестве панели для размещения элементов используется Canvas вместо стандартной VirtualizingStackPanel, что позволяет размещать элементы не стопкой, а по координатам. Координаты прикрепляются через стилизацию ContentPresenter, которые оборачивают каждый элемент.

Возникает загвоздка с координатой Y, так как в WPF она считается от левого верхнего угла, а в графике — от левого нижнего. Это решается при помощи преобразования вертикального отражения относительно центра: сначала отражается всё содержимое контейнера, потом текстовые надписи отражаются ещё раз, чтобы их можно было прочитать.

Маргины вроде 0 8 0 -8 — это сдвиги элементов относительно исходной позиции без изменения "внешнего" размера (в данном случае сдвиг вниз на 8 пунктов). Этот приём используется для центрирования надписей по вертикали и сдвига самого графика.

Так как WPF не умеет рисовать прямоугольники с отрицательной высотой, то надо удостовериться, что "минимальное" значение DeltaMin меньше "максимального" DeltaMax.

Запросы LINQ в коде не очень оптимальные, совершается много избыточных проходов по коллекции. Это сделано исключительно для простоты кода, в реальном приложении придётся написать менее кратко.

Также к имени класса Candle можно дописать суффикс ViewModel, так как этот класс — не часть домена, а используется исключительно как удобный источник данных для XAML. По вкусу можно сделать свойства свечки более доменными, но тогда понадобится писать конвертеры IValueConverter для преобразования DateTime и decimal к double. Это уже вопрос вкуса.


Всего-то 80 строк XAML.

Разумеется, это пример, и многое зашито в коде. Доведение до ума, в том числе дорисовывание вертикальных линий сетки — домашнее задание.

Реальный контрол должен учитывать, что диапазоны значений бывают разные по масштабу, давать возможность перематывать и масштабировать график и т.п. Но вот отобразить свечки — ну вообще никаких проблем. Развели разборки на пустом месте.

Человеку хочется потратить 500 репы на непонятно зачем нужную задачку — его воля. Может, он изучает WPF и хочет красивый простой пример. Может, у него неадекватный заказчик, который запрещает пользоваться библиотеками. Разные бывают ситуации. Если человек готов пожертвовать потом и кровью добытую репу, то, наверное, очень надо.

1
  • 5
    Ура! Добро победило! :) Спасибо большое Вам за пример.
    – Anonymous
    15 мар 2018 в 3:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.