尝试在我的 WPF 应用程序 (ColumnSeries) 中构建一个简单的实时图表
Trying to build a simple Live Chart into my WPF application (ColumnSeries)
几天来,我一直在尝试将实时图表构建到我的 WPF 应用程序中。
我想要一个简单的图表。
列系列,应将 int 值显示为条形并位于时间戳下方。
我用 MVVM 构建它,并试图通过本教程找到解决方案。 https://lvcharts.net/App/examples/v1/wpf/Basic%20Column
我的XAML代码:
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:ColumnSeries Values="{Binding RawDataSeries, UpdateSourceTrigger=PropertyChanged}" />
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX >
<lvc:Axis Labels="{Binding Labels}">
<lvc:Axis.Separator>
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
我在视图模型中的测试代码:
public void SetChart(int value)
{
var customerVmMapper = Mappers.Weighted<DateTimePoint>().X((x, index) => index).Y(x => x.Value);
Charting.For<DateTimePoint>(customerVmMapper);
var list = new List<DateTimePoint>()
{
new DateTimePoint() {Timestamp = DateTime.Now, Value = value},
new DateTimePoint() {Timestamp = DateTime.Now, Value = 78},
new DateTimePoint() {Timestamp = DateTime.Now, Value = 21}
};
var values = new ChartValues<DateTimePoint>();
foreach (var obj in list)
{
values.Add(obj);
}
RawDataSeries = values;
}
public ChartValues<DateTimePoint> RawDataSeries
{
get => _rawDataSeries;
set
{
_rawDataSeries = value;
OnPropertyChanged();
}
}
public class DateTimePoint
{
public DateTime Timestamp { get; set; }
public int Value { get; set; }
}
有没有人给我提示?
您需要指定数据对象的正确x/y映射,x轴的间隔
和打印时间戳的标签格式化程序:
ChartModel.cs
public class ChartModel
{
public ChartModel()
{
CartesianMapper<DateTimePoint> mapper = Mappers.Xy<DateTimePoint>()
.X((item) => (double) item.Timestamp.Ticks / TimeSpan.FromMinutes(5).Ticks) // Set interval to 5 minutes
.Y(item => item.Value)
.Fill((item) => item.Value > 99 ? Brushes.Red : Brushes.Blue);
var series = new ColumnSeries()
{
Title = "Timestamp Values",
Configuration = mapper,
Values = new ChartValues<DateTimePoint>
{
new DateTimePoint() {Timestamp = DateTime.Now, Value = 100},
new DateTimePoint() {Timestamp = DateTime.Now.AddMinutes(15), Value = 78},
new DateTimePoint() {Timestamp = DateTime.Now.AddMinutes(30), Value = 21}
}
};
this.SeriesCollection = new SeriesCollection() { series };
}
public SeriesCollection SeriesCollection { get; set; }
public Func<double, string> LabelFormatter =>
value => new DateTime((long) value * TimeSpan.FromMinutes(5).Ticks).ToString("t");
}
DateTimePoint.cs
public class DateTimePoint
{
public DateTime Timestamp { get; set; }
public int Value { get; set; }
}
MainWindow.xaml
<CartesianChart Margin="20"
Height="300"
Series="{Binding SeriesCollection}"
LegendLocation="Left">
<CartesianChart.DataContext>
<viewModels:ChartModel />
</CartesianChart.DataContext>
<CartesianChart.AxisX>
<Axis Title="Timestamp"
LabelFormatter="{Binding LabelFormatter}">
</Axis>
</CartesianChart.AxisX>
</CartesianChart>
另请阅读 Live Charts: Date Time 示例。
几天来,我一直在尝试将实时图表构建到我的 WPF 应用程序中。
我想要一个简单的图表。 列系列,应将 int 值显示为条形并位于时间戳下方。
我用 MVVM 构建它,并试图通过本教程找到解决方案。 https://lvcharts.net/App/examples/v1/wpf/Basic%20Column
我的XAML代码:
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:ColumnSeries Values="{Binding RawDataSeries, UpdateSourceTrigger=PropertyChanged}" />
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX >
<lvc:Axis Labels="{Binding Labels}">
<lvc:Axis.Separator>
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
我在视图模型中的测试代码:
public void SetChart(int value)
{
var customerVmMapper = Mappers.Weighted<DateTimePoint>().X((x, index) => index).Y(x => x.Value);
Charting.For<DateTimePoint>(customerVmMapper);
var list = new List<DateTimePoint>()
{
new DateTimePoint() {Timestamp = DateTime.Now, Value = value},
new DateTimePoint() {Timestamp = DateTime.Now, Value = 78},
new DateTimePoint() {Timestamp = DateTime.Now, Value = 21}
};
var values = new ChartValues<DateTimePoint>();
foreach (var obj in list)
{
values.Add(obj);
}
RawDataSeries = values;
}
public ChartValues<DateTimePoint> RawDataSeries
{
get => _rawDataSeries;
set
{
_rawDataSeries = value;
OnPropertyChanged();
}
}
public class DateTimePoint
{
public DateTime Timestamp { get; set; }
public int Value { get; set; }
}
有没有人给我提示?
您需要指定数据对象的正确x/y映射,x轴的间隔
和打印时间戳的标签格式化程序:
ChartModel.cs
public class ChartModel
{
public ChartModel()
{
CartesianMapper<DateTimePoint> mapper = Mappers.Xy<DateTimePoint>()
.X((item) => (double) item.Timestamp.Ticks / TimeSpan.FromMinutes(5).Ticks) // Set interval to 5 minutes
.Y(item => item.Value)
.Fill((item) => item.Value > 99 ? Brushes.Red : Brushes.Blue);
var series = new ColumnSeries()
{
Title = "Timestamp Values",
Configuration = mapper,
Values = new ChartValues<DateTimePoint>
{
new DateTimePoint() {Timestamp = DateTime.Now, Value = 100},
new DateTimePoint() {Timestamp = DateTime.Now.AddMinutes(15), Value = 78},
new DateTimePoint() {Timestamp = DateTime.Now.AddMinutes(30), Value = 21}
}
};
this.SeriesCollection = new SeriesCollection() { series };
}
public SeriesCollection SeriesCollection { get; set; }
public Func<double, string> LabelFormatter =>
value => new DateTime((long) value * TimeSpan.FromMinutes(5).Ticks).ToString("t");
}
DateTimePoint.cs
public class DateTimePoint
{
public DateTime Timestamp { get; set; }
public int Value { get; set; }
}
MainWindow.xaml
<CartesianChart Margin="20"
Height="300"
Series="{Binding SeriesCollection}"
LegendLocation="Left">
<CartesianChart.DataContext>
<viewModels:ChartModel />
</CartesianChart.DataContext>
<CartesianChart.AxisX>
<Axis Title="Timestamp"
LabelFormatter="{Binding LabelFormatter}">
</Axis>
</CartesianChart.AxisX>
</CartesianChart>
另请阅读 Live Charts: Date Time 示例。