基本 WPF LiveCharts DateTime 示例不起作用
Basic WPF LiveCharts DateTime example not working
我尽可能地遵循了 Live Charts TimeDate 基本示例,但似乎无法正确显示 X 轴。
https://lvcharts.net/App/examples/v1/wpf/Date%20Time
我的主窗口代码
public partial class MainWindow : Window
{
public Func<double, string> Formatter { get; set; }
public MainWindow()
{
InitializeComponent();
var dayConfig = Mappers.Xy<DateModel>()
.X(dateModel => dateModel.DateTime.Ticks / TimeSpan.FromDays(1).Ticks)
.Y(dateModel => dateModel.Value);
SeriesCollection Series = new SeriesCollection(dayConfig)
{
new LineSeries
{
Title = "Google Rank",
Values = new ChartValues<DateModel>
{
new Wpf.CartesianChart.Using_DateTime.DateModel
{
DateTime = System.DateTime.UtcNow,
Value = 5
},
new Wpf.CartesianChart.Using_DateTime.DateModel
{
DateTime = System.DateTime.UtcNow.AddDays(1),
Value = 9
},
new Wpf.CartesianChart.Using_DateTime.DateModel
{
DateTime = System.DateTime.UtcNow.AddDays(2),
Value = 4
}
},
Fill = Brushes.Transparent,
},
};
Formatter = value => new System.DateTime((long)(value * TimeSpan.FromDays(1).Ticks)).ToString("t");
RankGraph.Series = Series;
}
}
我的 XAML 在我的 MainWindow
<Grid>
<lvc:CartesianChart x:Name="RankGraph" Series="{Binding Series}">
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
日期模型对象
namespace Wpf.CartesianChart.Using_DateTime
{
public class DateModel
{
public DateTime DateTime { get; set; }
public double Value { get; set; }
}
}
这会产生以下日期混乱的...
您忘记设置数据上下文:
DataContext = this;
出于某种原因,XAML 中的 LiveCharts 绑定有时不起作用。
您需要在 XAML 中命名您的 LiveCharts 控件(任意):
<lvc:CartesianChart x:Name="RankGraph" Series="{Binding Series}">
<lvc:Axis x:Name="RankGraphAxisX" LabelFormatter="{Binding Formatter}"></lvc:Axis>
然后在后面的代码中绑定 Series 和 LabelFormatter:
RankGraph.Series = Series;
RankGraphAxisX.LabelFormatter = Formatter;
不知道这是否对任何人都有用,但我也阅读了这个示例代码(也发布在他们的网站上)。我继续阅读有关 LiveCharts 的更多信息,并发现了他们的 DateTimePoint class (LiveCharts.Defaults.DateTimePoint)。我才刚刚开始使用这些控件,但乍一看它绘制的图表几乎是我期望看到的内容。
我的问题是我有一堆 <DateTime, double>
类型的笛卡尔点,但是 DateTime
没有规律地分布 - 所以我有像 ("1 Jan 2015 00:00”,9.5)。 (“2015 年 1 月 20 日 04:00”,10),(“2016 年 1 月 4 日 06:46”,5.2)等。我认为他们的散点图最好涵盖不规则的时间间隔,我使用 WPF 开发我的应用程序,所以我得到了 XAML
....
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
...
<lvc:CartesianChart DataTooltip="{x:Null}">
<lvc:CartesianChart.Series>
<lvc:ScatterSeries Title="Raw Data" Values="{Binding RawDataSeries}" />
</lvc:CartesianChart.Series>
....
现在,我碰巧采用了 MVVM 方法(注意我的绑定),所以在我相应的 ViewModel 中,我编写了方法
public ChartValues<DateTimePoint> RawDataSeries
{
get
{
ChartValues<DateTimePoint> Values = new ChartValues<DateTimePoint>();
foreach (DatabaseEntry dbe in _Readings)
{
Values.Add(new DateTimePoint(dbe.Timestamp, dbe.Value));
}
return Values;
}
}
显然,这比他们网页上的代码要少得多。 DatabaseEntry
是我的一个 - 它只是一个包含 7 或 8 个属性的容器,包括时间戳 (DateTime) 和值 (double)。
我仍在编写此代码,所以我确定我还有更多工作要做,但就开始而言,到目前为止我看到的几乎是我期望看到的。
我尽可能地遵循了 Live Charts TimeDate 基本示例,但似乎无法正确显示 X 轴。
https://lvcharts.net/App/examples/v1/wpf/Date%20Time
我的主窗口代码
public partial class MainWindow : Window
{
public Func<double, string> Formatter { get; set; }
public MainWindow()
{
InitializeComponent();
var dayConfig = Mappers.Xy<DateModel>()
.X(dateModel => dateModel.DateTime.Ticks / TimeSpan.FromDays(1).Ticks)
.Y(dateModel => dateModel.Value);
SeriesCollection Series = new SeriesCollection(dayConfig)
{
new LineSeries
{
Title = "Google Rank",
Values = new ChartValues<DateModel>
{
new Wpf.CartesianChart.Using_DateTime.DateModel
{
DateTime = System.DateTime.UtcNow,
Value = 5
},
new Wpf.CartesianChart.Using_DateTime.DateModel
{
DateTime = System.DateTime.UtcNow.AddDays(1),
Value = 9
},
new Wpf.CartesianChart.Using_DateTime.DateModel
{
DateTime = System.DateTime.UtcNow.AddDays(2),
Value = 4
}
},
Fill = Brushes.Transparent,
},
};
Formatter = value => new System.DateTime((long)(value * TimeSpan.FromDays(1).Ticks)).ToString("t");
RankGraph.Series = Series;
}
}
我的 XAML 在我的 MainWindow
<Grid>
<lvc:CartesianChart x:Name="RankGraph" Series="{Binding Series}">
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
日期模型对象
namespace Wpf.CartesianChart.Using_DateTime
{
public class DateModel
{
public DateTime DateTime { get; set; }
public double Value { get; set; }
}
}
这会产生以下日期混乱的...
您忘记设置数据上下文:
DataContext = this;
出于某种原因,XAML 中的 LiveCharts 绑定有时不起作用。 您需要在 XAML 中命名您的 LiveCharts 控件(任意):
<lvc:CartesianChart x:Name="RankGraph" Series="{Binding Series}">
<lvc:Axis x:Name="RankGraphAxisX" LabelFormatter="{Binding Formatter}"></lvc:Axis>
然后在后面的代码中绑定 Series 和 LabelFormatter:
RankGraph.Series = Series;
RankGraphAxisX.LabelFormatter = Formatter;
不知道这是否对任何人都有用,但我也阅读了这个示例代码(也发布在他们的网站上)。我继续阅读有关 LiveCharts 的更多信息,并发现了他们的 DateTimePoint class (LiveCharts.Defaults.DateTimePoint)。我才刚刚开始使用这些控件,但乍一看它绘制的图表几乎是我期望看到的内容。
我的问题是我有一堆 <DateTime, double>
类型的笛卡尔点,但是 DateTime
没有规律地分布 - 所以我有像 ("1 Jan 2015 00:00”,9.5)。 (“2015 年 1 月 20 日 04:00”,10),(“2016 年 1 月 4 日 06:46”,5.2)等。我认为他们的散点图最好涵盖不规则的时间间隔,我使用 WPF 开发我的应用程序,所以我得到了 XAML
....
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
...
<lvc:CartesianChart DataTooltip="{x:Null}">
<lvc:CartesianChart.Series>
<lvc:ScatterSeries Title="Raw Data" Values="{Binding RawDataSeries}" />
</lvc:CartesianChart.Series>
....
现在,我碰巧采用了 MVVM 方法(注意我的绑定),所以在我相应的 ViewModel 中,我编写了方法
public ChartValues<DateTimePoint> RawDataSeries
{
get
{
ChartValues<DateTimePoint> Values = new ChartValues<DateTimePoint>();
foreach (DatabaseEntry dbe in _Readings)
{
Values.Add(new DateTimePoint(dbe.Timestamp, dbe.Value));
}
return Values;
}
}
显然,这比他们网页上的代码要少得多。 DatabaseEntry
是我的一个 - 它只是一个包含 7 或 8 个属性的容器,包括时间戳 (DateTime) 和值 (double)。
我仍在编写此代码,所以我确定我还有更多工作要做,但就开始而言,到目前为止我看到的几乎是我期望看到的。