Тепловая карта корреляции для основы представления окон - PullRequest
5 голосов
/ 31 мая 2011

Кто-нибудь знает какой-нибудь хороший инструмент для построения корреляционных тепловых карт для WPF?

Пример на основе комментариев:

enter image description here

Исходное изображение источник

Ответы [ 5 ]

8 голосов
/ 31 мая 2011

Бесплатный WPF Toolkit имеет TreeMap. Вы можете определить его в XAML следующим образом:

<vis:TreeMap ItemsSource="{Binding Path=HeatMap.Sectors}"
              Interpolators="{StaticResource colourInterpolator}">
  <vis:TreeMap.ItemDefinition>
    <vis:TreeMapItemDefinition ValueBinding="{Binding MarketCap}">
      <DataTemplate>
        <Grid>
          <Border x:Name="Border"
                  BorderBrush="Black"
                  BorderThickness="1"
                  Margin="1"
                  Opacity="0.5">                      
          </Border>
          <TextBlock Text="{Binding Name}"
                     TextWrapping="Wrap"
                     FontSize="20"
                     Margin="5"
                     VerticalAlignment="Center"
                     HorizontalAlignment="Center"/>
        </Grid>
      </DataTemplate>
    </vis:TreeMapItemDefinition>
  </vis:TreeMap.ItemDefinition>
</vis:TreeMap>

Приведенный выше XAML является фрагментом из приложения, которое я написал, в котором показаны финансовые HeatMaps. Вы можете увидеть версию Silverlight, работающую здесь:

http://www.scottlogic.co.uk/blog/colin/xaml-finance/

(просто нажмите кнопку «тепловая карта»)

2 голосов
/ 31 мая 2011

Компонент построения диаграмм Syncfusion отображает тепловые карты.

2 голосов
/ 31 мая 2011

Если вы ищете коммерческий продукт, я бы посоветовал вам взглянуть на элементы управления Telerik. Telerik имеет отличные элементы управления для WPF. В длинный список включен элемент управления «Тепловая карта». Вот ссылка на сайт, где они перечисляют функцию тепловой карты:

http://www.telerik.com/products/wpf/map.aspx

Если вы хотите что-то построить, вот пара статей в блоге, в которых рассказывается, как это сделать (с указанием источника):

http://www.garrettgirod.com/?p=111

http://www.nickdarnell.com/?p=833

1 голос
/ 19 ноября 2016

Я использовал DevExpress с пользовательским поведением ColorFormatter.Я не смог найти на рынке ничего такого, что бы делало это из коробки.На это у меня ушло несколько дней.Мой код приведен ниже, надеюсь, это кому-нибудь поможет.

Редактировать: я использовал модели представления POCO и MVVM, но вы можете изменить это, чтобы не использовать POCO, если хотите.

Example

Table2DViewModel.cs

namespace ViewModel
{
    [POCOViewModel]
    public class Table2DViewModel
    {
        public ITable2DView Table2DView { get; set; }

        public DataTable ItemsTable { get; set; }


        public Table2DViewModel()
        {
        }

        public Table2DViewModel(MainViewModel mainViewModel, ITable2DView table2DView) : base(mainViewModel)
        {
            Table2DView = table2DView;   
            CreateTable();
        }

        private void CreateTable()
        {
            var dt = new DataTable();
            var xAxisStrings = new string[]{"X1","X2","X3"};
            var yAxisStrings = new string[]{"Y1","Y2","Y3"};

            //TODO determine your min, max number for your colours
            var minValue = 0;
            var maxValue = 100;
            Table2DView.SetColorFormatter(minValue,maxValue, null);

            //Add the columns
            dt.Columns.Add(" ", typeof(string));
            foreach (var x in xAxisStrings) dt.Columns.Add(x, typeof(double));

            //Add all the values
            double z = 0;
            for (var y = 0; y < yAxisStrings.Length; y++)
            {
                var dr = dt.NewRow();
                dr[" "] = yAxisStrings[y];
                for (var x = 0; x < xAxisStrings.Length; x++)
                {
                    //TODO put your actual values here!
                    dr[xAxisStrings[x]] = z++; //Add a random values
                }
                dt.Rows.Add(dr);
            }
            ItemsTable = dt;
        }


        public static Table2DViewModel Create(MainViewModel mainViewModel, ITable2DView table2DView)
        {
            var factory = ViewModelSource.Factory((MainViewModel mainVm, ITable2DView view) => new Table2DViewModel(mainVm, view));
            return factory(mainViewModel, table2DView);
        }
    }

}

ITable2DView.cs

namespace Interfaces
    {
        public interface ITable2DView
        {
            void SetColorFormatter(float minValue, float maxValue, ColorScaleFormat colorScaleFormat);
        }
    }

Table2DView.xaml.cs

namespace View
{
    public partial class Table2DView : ITable2DView
    {
        public Table2DView()
        {
            InitializeComponent();
        }

        static ColorScaleFormat defaultColorScaleFormat = new ColorScaleFormat
        {
            ColorMin = (Color)ColorConverter.ConvertFromString("#FFF8696B"),
            ColorMiddle = (Color)ColorConverter.ConvertFromString("#FFFFEB84"),
            ColorMax = (Color)ColorConverter.ConvertFromString("#FF63BE7B")
        };

        public void SetColorFormatter(float minValue, float maxValue, ColorScaleFormat colorScaleFormat = null)
        {
            if (colorScaleFormat == null) colorScaleFormat = defaultColorScaleFormat;
            ConditionBehavior.MinValue = minValue;
            ConditionBehavior.MaxValue = maxValue;
            ConditionBehavior.ColorScaleFormat = colorScaleFormat;
        }
    }
}

DynamicConditionBehavior.cs

namespace Behaviors
{
    public class DynamicConditionBehavior : Behavior<GridControl>
    {
        GridControl Grid => AssociatedObject;

        protected override void OnAttached()
        {
            base.OnAttached();
            Grid.ItemsSourceChanged += OnItemsSourceChanged;
        }

        protected override void OnDetaching()
        {
            Grid.ItemsSourceChanged -= OnItemsSourceChanged;
            base.OnDetaching();
        }

        public ColorScaleFormat ColorScaleFormat { get; set;}
        public float MinValue { get; set; }
        public float MaxValue { get; set; }

        private void OnItemsSourceChanged(object sender, EventArgs e)
        {
            var view = Grid.View as TableView;

            if (view == null) return;

            view.FormatConditions.Clear();

            foreach (var col in Grid.Columns)
            {
                view.FormatConditions.Add(new ColorScaleFormatCondition
                {
                    MinValue = MinValue,
                    MaxValue = MaxValue,
                    FieldName = col.FieldName,
                    Format = ColorScaleFormat,
                });
            }

        }
    }
}

Table2DView.xaml

<UserControl x:Class="View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
             xmlns:ViewModels="clr-namespace:ViewModel"
             xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
             xmlns:behaviors="clr-namespace:Behaviors"
             xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
             DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModels:ViewModel}}"
             mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="800">

    <UserControl.Resources>
        <Style TargetType="{x:Type dxg:GridColumn}">
            <Setter Property="Width" Value="50"/>
            <Setter Property="HorizontalHeaderContentAlignment" Value="Center"/>
        </Style>

        <Style TargetType="{x:Type dxg:HeaderItemsControl}">
            <Setter Property="FontWeight" Value="DemiBold"/>
        </Style>
    </UserControl.Resources>

        <!--<dxmvvm:Interaction.Behaviors>
            <dxmvvm:EventToCommand EventName="" Command="{Binding OnLoadedCommand}"/>
        </dxmvvm:Interaction.Behaviors>-->
        <dxg:GridControl ItemsSource="{Binding ItemsTable}"
                     AutoGenerateColumns="AddNew"
                     EnableSmartColumnsGeneration="True">

        <dxmvvm:Interaction.Behaviors >
            <behaviors:DynamicConditionBehavior x:Name="ConditionBehavior" />
            </dxmvvm:Interaction.Behaviors>
            <dxg:GridControl.View>
                <dxg:TableView ShowGroupPanel="False"
                           AllowPerPixelScrolling="True"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
  </UserControl>
1 голос
/ 03 ноября 2016

Не бесплатный компонент, но если вы можете получить в свои руки библиотеку Telerik, вы можете использовать следующее:

http://www.telerik.com/products/wpf/heatmap.aspx

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

...