WPF中LiveChart无法随VK API数据更新问题求助

问题描述 #

在WPF项目中使用LiveCharts展示VK API获取的统计数据，切换月份时period_from和period_to参数更新正常，调试时所有变量值正确，但图表始终无法刷新显示新数据。

问题根源 #

1. 未实现属性变更通知：Window1类未实现INotifyPropertyChanged接口，绑定的SeriesCollection、BarLabels等属性更新时，WPF绑定系统无法感知变化，不会触发UI更新。
2. 同步网络请求阻塞UI：使用HttpWebRequest同步请求数据，阻塞UI线程导致图表更新不及时。
3. 错误的时间戳基准：转换DateTime到Timestamp时使用1965年作为基准，而VK API的Unix时间戳以1970年1月1日为起点，可能导致时间解析错误。

修复步骤 #

1. 实现INotifyPropertyChanged接口 #

为Window1类添加属性变更通知，确保属性更新时通知UI：

public partial class Window1 : Window, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // 替换原自动属性为带通知的属性
    private SeriesCollection _seriesCollection;
    public SeriesCollection SeriesCollection
    {
        get => _seriesCollection;
        set
        {
            _seriesCollection = value;
            OnPropertyChanged();
        }
    }

    private DateTime[] _barLabels;
    public DateTime[] BarLabels
    {
        get => _barLabels;
        set
        {
            _barLabels = value;
            OnPropertyChanged();
        }
    }

    private Func<double, string> _formatter;
    public Func<double, string> Formatter
    {
        get => _formatter;
        set
        {
            _formatter = value;
            OnPropertyChanged();
        }
    }

    // 其他原有代码...
}

2. 替换为异步网络请求 #

使用HttpClient异步请求数据，避免阻塞UI线程：

private async Task GetNewSubscribersStatisticsAsync()
{
    url = $"https://api.vk.com/method/stats.get?group_id={groupId}&access_token={accessToken}&timestamp_from={timestamp_from}&timestamp_to={timestamp_to}&v={apiVersion}";

    using (HttpClient client = new HttpClient())
    {
        string response = await client.GetStringAsync(url);
        Stat stats = JsonConvert.DeserializeObject<Stat>(response);

        times.Clear();
        visitors.Clear();

        foreach (var s in stats.response)
        {
            // 修正Unix时间戳基准为1970年
            DateTime dat_Time = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
            dat_Time = dat_Time.AddSeconds(Convert.ToDouble(s.period_from)).ToLocalTime();
            times.Add(dat_Time);
            visitors.Add(s.visitors.views);
        }

        SeriesCollection = new SeriesCollection
        {
            new ColumnSeries
            {
                Values = new ChartValues<int>(visitors)
            }
        };
        BarLabels = times.ToArray();
        Formatter = value => value.ToString("N");

        ViewsChart.Update();
    }
}

3. 修正时间戳转换方法 #

确保Unix时间戳转换的基准时间正确：

private long ConvertToTimestamp(DateTime value)
{
    DateTime epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
    TimeSpan span = value.ToUniversalTime() - epoch;
    return (long)span.TotalSeconds;
}

4. 异步调用数据获取方法 #

修改set_list为异步方法，避免阻塞UI：

private async void set_list()
{
    MonthBlock.Text = Month_Translate_ToRus(current_month);
    DateTime dt_from = new DateTime(current_year, current_month, 1);
    DateTime dt_to = new DateTime(current_year, current_month, set_day(current_month));

    timestamp_from = ConvertToTimestamp(dt_from);
    timestamp_to = ConvertToTimestamp(dt_to);

    await GetNewSubscribersStatisticsAsync();
}

5. 优化数据模型（规范建议） #

将数据模型的字段改为属性，确保Json序列化可靠：

public class StatResponse
{
    public string period_from { get; set; }
    public string period_to { get; set; }
    public Visitors visitors { get; set; }
}
public class Visitors
{
    public int views { get; set; }
}
public class Stat
{
    public List<StatResponse> response { get; set; }
}

关键注意事项 #

• 无需每次更新数据后重新设置DataContext，通过PropertyChanged通知即可完成UI更新。
• 构造函数中使用_ = set_list();调用异步方法，避免阻塞UI初始化。
• 确保Unix时间戳基准正确，否则会导致日期解析错误，影响X轴标签显示。

内容的提问来源于stack exchange，提问作者Амина Семёнова