带有 LiveCharts 的 WPF 在运行时添加带有 DataBinding 的系列

Posted

技术标签:

【中文标题】带有 LiveCharts 的 WPF 在运行时添加带有 DataBinding 的系列【英文标题】:WPF with LiveCharts add series with DataBinding at runtime 【发布时间】:2021-02-19 02:12:44 【问题描述】:

我有一个项目,其中有一个图表区域。 为此,我选择了 LiveCharts (http://lvcharts.net)。

到目前为止一切顺利,当添加到 xaml 中时,图表可以与数据绑定一起使用:

<UserControl x:Class="Work_Task_Planner_Sheduler.Views.TeamTaskProgressChartView"
             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:local="clr-namespace:Work_Task_Planner_Sheduler.Views"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <lvc:CartesianChart x:Name="TeamTaskProgressChartComponent">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Title="Julian" Values="Binding Taskprogress_julian" />
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="Time"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="TaskProgress"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

问题是:Line 系列在 xaml 中是硬编码的。谁知道团队是否会随着时间的推移而变大/变小,或者团队成员是否会发生变化。因此我想在运行时创建线系列。

这是我目前所拥有的,不幸的是该系列仍然是空的:

CartesianChart chart = this.TeamTaskProgressChartComponent;
foreach(string user in TeamMembers)

    LineSeries lineseries = new LineSeries();
    string title = user.Split('.')[0];
    lineseries.Title = title;
    Binding databinding = new Binding();
    databinding.Source =
    Datarefresh.mainWindow.mainViewModel.TeamTaskProgressChartViewModel.TaskProgressCounts;
    DependencyProperty LineSeriesProperty = DependencyProperty.Register(title+"Property", typeof(int), typeof(LineSeries), new PropertyMetadata(0));
    lineseries.SetBinding(LineSeriesProperty, databinding);
    chart.series.Add(lineseries);

【问题讨论】:

【参考方案1】:

您必须设置绑定的来源。

CartesianChart chart = new CartesianChart();
foreach(string user in TeamMembers)

    LineSeries lineseries = new LineSeries();
    string title = user.Split('.')[0];
    lineseries.Title = title;
    Binding databinding = new Binding("Taskprogress_"+title);

    //===========Set source here before setting the binding to the lineseries===========
    databinding.Source = "your datasource";

    // the following line is pseudocode derived from Microsoft reference
    // https://docs.microsoft.com/en-us/dotnet/desktop/wpf/data/how-to-create-      a-binding-in-code?view=netframeworkdesktop-4.8
    lineseries.SetBinding(LineSeries.Values, databinding); 

【讨论】:

我已经更新了我的代码。我现在可以编译并运行该应用程序,但该系列仍为空。这在 xaml 中定义相同时有效【参考方案2】:

其实过程很简单:

    创建一个系列排序规则。重要提示:必须在构造函数中初始化系列集合,以便在加载图表时准备好:

    public class TeamTicketResolveChartViewModel
    
        public SeriesCollection ChartSeries  get; set; 
        public string[] TicketResolveLabels  get; set; 
    
        public TeamTicketResolveChartViewModel()
        
            ChartSeries = new SeriesCollection();
            foreach (string user in TeamMembers.ServiceDesk)
            
                LineSeries lineseries = new LineSeries();
                string title = user.Split('.')[0];
                lineseries.Title = title;
                ChartSeries.Add(lineseries);
            
        
        // other functions
    
    

    在xaml中,将图表绑定到系列Collection:

    <lvc:CartesianChart x:Name="TeamTicketResolveChartComponent" Series="Binding ChartSeries" />
    

    现在更新图表数据将按预期工作:

    public void LoadChartData2(List<List<(DateTime time, int resolved)>> input)
    
        for (int i = 0; i < input.Count; i++)
        
            ChartSeries[i].Values = new ChartValues<int>(input[i].Select(c => c.resolved));
        
    
        DateTime[] dates = input[0].Select(c => c.time).ToArray();
        List<string> labels = new List<string>();
        foreach (DateTime time in dates) labels.Add(time.ToString("HH:mm:ss"));
        TicketResolveLabels = labels.ToArray();
    
    public void AddChartPoint(List<List<(DateTime time, int resolved)>> input)
    
        // Chartseries[i].values.Add()
    
    

【讨论】:

以上是关于带有 LiveCharts 的 WPF 在运行时添加带有 DataBinding 的系列的主要内容,如果未能解决你的问题,请参考以下文章

WPF绘制图表-LiveCharts

WPF实现统计图(饼图仿LiveCharts)

LiveCharts文档-1前言

LiveCharts文档-3开始-1安装

有一个带有链接 Javascript 的 HTML 文档我试图在单击提交按钮时添加一条警报消息。我该怎么做呢?

将垂直线添加到 LiveCharts.WinForms.CartesianChart