文章/答案/技术大牛

发布

社区首页 >问答首页 >LiveCharts设置DateTime X轴MinValue和MaxValue以放大/缩小

问LiveCharts设置DateTime X轴MinValue和MaxValue以放大/缩小
EN

Stack Overflow用户

提问于 2019-10-09 22:49:16

回答 1查看 3.7K关注 0票数 1

我有一个使用WPF的LiveCharts应用程序，其中我绘制了一个X-Axis为DateTime的LineGraph。我的最终目标是实现“双向”变焦。也就是说，我的应用程序中有两个DateTimePicker控件(来自WPF工具包)，它们代表当前显示的图形区域的最小和最大DateTime，如果我使用图形区域上的滚动轮放大/缩小，更新的范围应该反映在上述控件上，(这是我正在挣扎的部分)相反，如果我在DateTimePicker控件上设置了min/max，则该图形应该相应地放大/缩小。

我的XAML非常简单：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <lvc:CartesianChart Name="MyChart"
                        Series="{Binding SeriesCollection}"
                        Zoom="X">
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"
                      PreviewRangeChangedCommand="{Binding XRangeChangedCommand}"
                      MinValue="{Binding TimeStampMin, Mode=TwoWay}"
                      MaxValue="{Binding TimeStampMax, Mode=TwoWay}"/>
        </lvc:CartesianChart.AxisX>
    </lvc:CartesianChart>
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
        <xceed:DateTimePicker Margin="4" Width="160" Name="dtpMinX"
                              Format="Custom" FormatString="yyyy/MM/dd HH:mm:ss"
                              Value="{Binding TimeStampMin, Mode=TwoWay}"/>
        <xceed:DateTimePicker Margin="4" Width="160" Name="dtpMaxX"
                              Format="Custom" FormatString="yyyy/MM/dd HH:mm:ss"
                              Value="{Binding TimeStampMax, Mode=TwoWay}"/>
    </StackPanel>
</Grid>

这是我的DataPoint课程：

public class DataPoint
{
    public DataPoint() { }

    public DataPoint(DateTime timeStamp, double value)
    {
        TimeStamp = timeStamp;
        Value = value;
    }

    public double Value { get; set; }
    public DateTime TimeStamp { get; set; }
}

这是我的PlotGraph()方法，它完成所有的绘图工作。如果您想要复制这个应用程序，我将在文章的底部包含我的整个MainWindow()代码。

private void PlotGraph()
{
    var mapper = Mappers.Xy<DataPoint>()
        .X(dp => dp.TimeStamp.Ticks)
        .Y(dp => dp.Value);
    SeriesCollection = new SeriesCollection(mapper);

    var lineSeries = new LineSeries
    {
        Values = DataPoints.AsChartValues(),
        Fill = Brushes.Transparent
    };
    SeriesCollection.Add(lineSeries);

    TimeStampMin = DataPoints.FirstOrDefault().TimeStamp;
    TimeStampMax = DataPoints.LastOrDefault().TimeStamp;

    Formatter = value => new DateTime((long)value).ToString("MM/dd/yy HH:mm:ss");

    DataContext = this;
}

现在，当我运行它并使用鼠标放大/缩小时，我的时间戳的更新结束值将很好地反映在DateTimePicker控件上。但是，如果我试图设置DateTimePicker控件中的值以便放大/缩小，它将不会合作。当我尝试时，在我的Output窗口中，我会得到以下两个绑定相关的错误消息：

System.Windows.Data错误:5: BindingExpression生成的值对目标属性无效。值=‘10/09/2019 15:50:41’BindingExpression:Path=TimeStampMin；DataItem='MainWindow‘(名称=’‘)；目标元素是'Axis’(名称=‘’)；目标属性是'MinValue‘(类型'Double')。 System.Windows.Data错误:5: BindingExpression生成的值对目标属性无效。值=‘10/09/2019 16:00:54’BindingExpression:Path=TimeStampMax；DataItem='MainWindow‘(名称=’‘)；目标元素是'Axis’(名称=‘’)；目标属性是'MaxValue‘(类型'Double')。

这告诉我，问题在于绑定，Axis.MinValue和Axis.MaxValue期望双倍，而我的TimeStampMin和TimeStampMax显然是DateTime对象。我如何进行转换，以便我可以实现双向缩放？

这里是我的整个MainWindow代码，如果您想要再现它的话。我正在为命令等使用MVVMLight工具包，所以如果您想按原样运行这个包，您可能必须获得NuGet包。

看起来有些人无法访问链接，下面是完整的代码：

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public SeriesCollection SeriesCollection
    {
        get;
        set;
    }

    public Func<double, string> Formatter
    {
        get;
        set;
    }

    private DateTime _timeStampMin;
    public DateTime TimeStampMin
    {
        get
        {
            return _timeStampMin;
        }

        set
        {
            if (_timeStampMin == value)
                return;
            _timeStampMin = value;
            OnPropertyChanged("TimeStampMin");
        }
    }

    private DateTime _timeStampMax;
    public DateTime TimeStampMax
    {
        get
        {
            return _timeStampMax;
        }

        set
        {
            if (_timeStampMax == value)
                return;
            _timeStampMax = value;
            OnPropertyChanged("TimeStampMax");
        }
    }

    public List<DataPoint> DataPoints
    {
        get;
        set;
    }

    public RelayCommand<PreviewRangeChangedEventArgs> XRangeChangedCommand
    {
        get;
        private set;
    }

    public MainWindow()
    {
        InitializeComponent();
        XRangeChangedCommand = new RelayCommand<PreviewRangeChangedEventArgs>(e => XRangeChanged(e));
        InitializeData();
        PlotGraph();
    }

    private void InitializeData()
    {
        var now = DateTime.Now;
        DataPoints = new List<DataPoint>{new DataPoint()
        {Value = 1, TimeStamp = now.AddMinutes(1)}, new DataPoint()
        {Value = 4, TimeStamp = now.AddMinutes(2)}, new DataPoint()
        {Value = 9, TimeStamp = now.AddMinutes(3)}, new DataPoint()
        {Value = 16, TimeStamp = now.AddMinutes(4)}, new DataPoint()
        {Value = 25, TimeStamp = now.AddMinutes(5)}, new DataPoint()
        {Value = 36, TimeStamp = now.AddMinutes(6)}, new DataPoint()
        {Value = 49, TimeStamp = now.AddMinutes(7)}, new DataPoint()
        {Value = 64, TimeStamp = now.AddMinutes(8)}, new DataPoint()
        {Value = 81, TimeStamp = now.AddMinutes(9)}, new DataPoint()
        {Value = 100, TimeStamp = now.AddMinutes(10)}, new DataPoint()
        {Value = 11 * 11, TimeStamp = now.AddMinutes(11)}, new DataPoint()
        {Value = 12 * 12, TimeStamp = now.AddMinutes(12)}, new DataPoint()
        {Value = 13 * 13, TimeStamp = now.AddMinutes(13)}, new DataPoint()
        {Value = 14 * 14, TimeStamp = now.AddMinutes(14)}, new DataPoint()
        {Value = 15 * 15, TimeStamp = now.AddMinutes(15)}, new DataPoint()
        {Value = 16 * 16, TimeStamp = now.AddMinutes(16)}, new DataPoint()
        {Value = 17 * 17, TimeStamp = now.AddMinutes(17)}, new DataPoint()
        {Value = 18 * 18, TimeStamp = now.AddMinutes(18)}, new DataPoint()
        {Value = 19 * 19, TimeStamp = now.AddMinutes(19)}, new DataPoint()
        {Value = 20 * 20, TimeStamp = now.AddMinutes(20)}, };
    }

    private void PlotGraph()
    {
        var mapper = Mappers.Xy<DataPoint>().X(dp => dp.TimeStamp.Ticks).Y(dp => dp.Value);
        SeriesCollection = new SeriesCollection(mapper);
        var lineSeries = new LineSeries{Values = DataPoints.AsChartValues(), Fill = Brushes.Transparent};
        SeriesCollection.Add(lineSeries);
        TimeStampMin = DataPoints.FirstOrDefault().TimeStamp;
        TimeStampMax = DataPoints.LastOrDefault().TimeStamp;
        Formatter = value => new DateTime((long)value).ToString("MM/dd/yy HH:mm:ss");
        DataContext = this;
    }

    public void XRangeChanged(PreviewRangeChangedEventArgs e)
    {
        TimeStampMin = DateTime.FromBinary((long)e.PreviewMinValue);
        TimeStampMax = DateTime.FromBinary((long)e.PreviewMaxValue);
    }
}

wpf

datetime

datetimepicker

livecharts

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-11 08:00:21

是的，当您说问题在Min的双时间和日期时间与Axis X的最大值之间时，您有一定的答案：

您有两个解决方案:要么使用转换器，要么在datepicker和min/max值之间分离值:在这里，第二个解决方案：

在xaml文件中：

        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"
                  PreviewRangeChangedCommand="{Binding XRangeChangedCommand}"
                  MinValue="{Binding TimeStampMinX, Mode=TwoWay}"
                  MaxValue="{Binding TimeStampMaxX, Mode=TwoWay}"/>
        </lvc:CartesianChart.AxisX>

在cs.file中：

    private double _timeStampMinX;
    public double TimeStampMinX
    {
        get
        {
            return _timeStampMinX;
        }

        set
        {
            if (_timeStampMinX == value)
                return;
            _timeStampMinX = value;
            OnPropertyChanged("TimeStampMinX");
        }
    }

    private double _timeStampMaxX;
    public double TimeStampMaxX
    {
        get
        {
            return _timeStampMaxX;
        }

        set
        {
            if (_timeStampMaxX == value)
                return;
            _timeStampMaxX = value;
            OnPropertyChanged("TimeStampMaxX");
        }
    }
    private DateTime _timeStampMin;
    public DateTime TimeStampMin
    {
        get
        {
            return _timeStampMin;
        }

        set
        {
            if (_timeStampMin == value)
                return;
            _timeStampMin = value;
            TimeStampMinX = value.Ticks;
            OnPropertyChanged("TimeStampMin");
        }
    }

    private DateTime _timeStampMax;
    public DateTime TimeStampMax
    {
        get
        {
            return _timeStampMax;
        }

        set
        {
            if (_timeStampMax == value)
                return;
            _timeStampMax = value;
            TimeStampMaxX = value.Ticks;
            OnPropertyChanged("TimeStampMax");
        }
    }

DateTime与双值之间的链接是DateTime.Ticks。

使用转换器的解决方案：

类转换器：

public class DateTimeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((DateTime)value).Ticks;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

xaml文件中转换器的集成(用名称空间更改名称空间WpfApp2 )

    xmlns:dc="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
    <dc:DateTimeConverter x:Key="DateTimeConverter"></dc:DateTimeConverter>
</Window.Resources>
                        :
                        :
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"
                  PreviewRangeChangedCommand="{Binding XRangeChangedCommand}"
                  MinValue="{Binding TimeStampMin, Mode=TwoWay,Converter={StaticResource DateTimeConverter}}"
                  MaxValue="{Binding TimeStampMax, Mode=TwoWay,Converter={StaticResource DateTimeConverter}}"/>
        </lvc:CartesianChart.AxisX>

在这种情况下，不需要分离绑定值，转换器就可以完成这项工作。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58313257

复制

相似问题

问LiveCharts设置DateTime X轴MinValue和MaxValue以放大/缩小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问LiveCharts设置DateTime X轴MinValue和MaxValue以放大/缩小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问LiveCharts设置DateTime X轴MinValue和MaxValue以放大/缩小
EN