具有不同 XAxis (DateTime) 区域的 Infragistics 多个系列

Question

我需要在单个区域显示两条线系列。它们共享 X 轴 (DateTime) 和不同的 Y-axis。

使用CategoryXAxis

如果我在X-axis 中使用CategoryXAxis 类型，我会看到两个系列，但它们不是通过 X 轴同步的（您可以在工具提示中看到它）。

_categoryXAxis = new CategoryXAxis()
{
    ItemsSource = enumerable,
    FontSize = 10,
};

使用 CategoryDateTimeXAxis

如果我使用CategoryDateTimeXAxis 类型作为X-axis 比我看到SINGLE 系列，我看到两个工具提示，但它们不是由X 轴同步的（你可以在工具提示上看到它））。

_categoryXAxis = new CategoryDateTimeXAxis()
{
    ItemsSource = enumerable,
    DateTimeMemberPath = "DateTime",
    DisplayType = TimeAxisDisplayType.Continuous,
    FontSize = 10,
    MinimumValue = new DateTime(2000, 1, 1),
    MaximumValue = new DateTime(2017, 1, 1),
};

我能做什么？

Answer 1

下面的例子演示了如何同步两个系列的 DateTime 轴：

MainWindow.xaml

<Window x:Class="xamDataChartMultipleSeries.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        xmlns:ig="http://schemas.infragistics.com/xaml"
        Title="XamDataChart" Height="350" Width="525" >
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="DataTrackerTemplate">
                <Ellipse Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                         MinWidth="15" MinHeight="15"  StrokeThickness="0.5"
                         Fill="{Binding Path=ActualItemBrush}" Stroke="{Binding Path=Series.ActualMarkerOutline}" >
                </Ellipse>
            </DataTemplate>
        </Grid.Resources>

        <ig:XamDataChart Name="MultipleSeriesChart" Padding="5"
                         OverviewPlusDetailPaneVisibility="Collapsed"
                         OverviewPlusDetailPaneHorizontalAlignment="Left"
                         OverviewPlusDetailPaneVerticalAlignment="Bottom" >

            <ig:XamDataChart.Axes>

                <ig:CategoryDateTimeXAxis x:Name="xAxis" Title="TIME (min)" Label="{}{DateTime:MM/dd/yyyy}" DateTimeMemberPath="DateTime" DisplayType="Discrete" >
                    <ig:CategoryDateTimeXAxis.LabelSettings>
                        <ig:AxisLabelSettings Location="OutsideBottom" Angle="40" />
                    </ig:CategoryDateTimeXAxis.LabelSettings>
                </ig:CategoryDateTimeXAxis>
                <ig:NumericYAxis x:Name="yAxis" Title="" Label="{}{0:0.##}" Interval="0.25" />
            </ig:XamDataChart.Axes>

            <ig:XamDataChart.Series>
                <ig:LineSeries x:Name="Series1" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ValueMemberPath="Series1"
                                   MarkerType="None" Thickness="2" IsTransitionInEnabled="True" IsHighlightingEnabled="True" Brush="Blue" >
                    <ig:LineSeries.ToolTip>
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="X= " />
                                <TextBlock Text="{Binding Item.DateTime}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
                                <TextBlock Text="Y= " />
                                <TextBlock Text="{Binding Item.Series1, StringFormat={}{0:#,0.000}}" />
                            </StackPanel>
                        </StackPanel>
                    </ig:LineSeries.ToolTip>
                </ig:LineSeries>

                <ig:LineSeries x:Name="Series2" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ValueMemberPath="Series2" 
                                   MarkerType="None" Thickness="2" IsTransitionInEnabled="True" IsHighlightingEnabled="True" Brush="Green">
                    <ig:LineSeries.ToolTip>
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="X= " />
                                <TextBlock Text="{Binding Item.DateTime}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
                                <TextBlock Text="Y= " />
                                <TextBlock Text="{Binding Item.Series2, StringFormat={}{0:#,0.000}}" />
                            </StackPanel>
                        </StackPanel>
                    </ig:LineSeries.ToolTip>
                </ig:LineSeries>

                <ig:CategoryItemHighlightLayer x:Name="TackingLayer" Opacity="1" MarkerTemplate="{StaticResource DataTrackerTemplate}" UseInterpolation="True"
                                               TransitionDuration="0:00:00.1" Canvas.ZIndex="11" />

                <ig:ItemToolTipLayer x:Name="ToolTipLayer" Canvas.ZIndex="12" UseInterpolation="True" TransitionDuration="0:00:00.1" />
                <ig:CrosshairLayer x:Name="CrosshairLayer" Opacity="1" Thickness="1"  Canvas.ZIndex="15" UseInterpolation="True" TransitionDuration="0:00:00.1"/>

            </ig:XamDataChart.Series>
        </ig:XamDataChart>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Windows;
using System.ComponentModel;

namespace xamDataChartMultipleSeries
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        int points = 20;    
        List<Point> data = new List<Point>();

        public MainWindow()
        {
            InitializeComponent();                     
            double x = 0;
            var step = 2 * Math.PI / points;
            var now = DateTime.Now;
            xAxis.MinimumValue = now;
            xAxis.MaximumValue = now.AddDays(points);
            xAxis.Interval = new TimeSpan(0,6,0,0);    
            var next = now; 
            for (var i = 0; i < points; i++, x += step)
            {
                next = next.AddDays(1);
                Data.Add(new ChartDataItem() { DateTime=next, Series1 = Math.Sin(x), Series2 = Math.Cos(x) });
            }    
            if (!DesignerProperties.GetIsInDesignMode(this))
            {
                xAxis.ItemsSource = Series1.ItemsSource = Series2.ItemsSource = Data;
            }
        }    
        // ChartDataCollection
        public ChartDataCollection Data = new ChartDataCollection();
    }
}

ChartData.cs

using System;
using System.Collections.ObjectModel;
using Infragistics.Samples.Shared.Models;

namespace xamDataChartMultipleSeries
{
    public class ChartDataCollection : ObservableCollection<ChartDataItem>
    {
        public ChartDataCollection() { }
    }

    public class ChartDataItem : ObservableModel
    {
        public ChartDataItem() { }
        public ChartDataItem(ChartDataItem dataPoint)
        {
            this.DateTime = dataPoint.DateTime;
            this.Series1 = dataPoint.Series1;
            this.Series2 = dataPoint.Series2;
        }

        private DateTime _dt;
        public DateTime DateTime
        {
            get { return _dt; }
            set { if (_dt == value) return; _dt = value; }
        }

        private double _series1;
        public double Series1
        {
            get { return _series1; }
            set { if (_series1 == value) return; _series1 = value; OnPropertyChanged("Series1"); }
        }

        private double _series2;
        public double Series2
        {
            get { return _series2; }
            set { if (_series2 == value) return; _series2 = value; OnPropertyChanged("Series2"); }
        }

        public new string ToString()
        {
            return base.ToString();
        }
    }
}

Infragistics 示例中包含的辅助类：

ObservableModel.cs

using System.ComponentModel;
using System.Runtime.Serialization;

namespace Infragistics.Samples.Shared.Models
{
    [DataContract]
    public abstract class ObservableModel : INotifyPropertyChanged 
    {
        protected ObservableModel()
        {
            IsPropertyNotifyActive = true;
        }

        #region INotifyPropertyChanged  

        public bool IsPropertyNotifyActive { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        protected bool HasPropertyChangedHandler()
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            return handler != null;
        }
        protected void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null && IsPropertyNotifyActive)
                handler(sender, e);
        }
        protected void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            OnPropertyChanged(this, e);
        }
        protected void OnPropertyChanged(object sender, string propertyName)
        {
            OnPropertyChanged(sender, new PropertyChangedEventArgs(propertyName));
        }
        protected virtual void OnPropertyChanged(string propertyName)
        {
            OnPropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        protected delegate void PropertyChangedDelegate(object sender, string propertyName);

        #endregion
    }
}