在 WPF 应用程序中显示 LiveCharts 2 图表时出现问题

Question

我目前正在开发一个 WPF 应用程序，需要使用 LiveCharts 2 显示图表。我已按照可用的文档和示例进行操作，但遇到了图表在我的应用程序中无法正确显示的问题。

在XAML代码中

<UserControl x:Class="Iris.View.MultimediaEditor"
             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:hc="clr-namespace:HandyControl.Controls;assembly=HandyControl" 
             xmlns:local="clr-namespace:Iris.View"
             mc:Ignorable="d"
             d:DesignHeight="2325.465" d:DesignWidth="800"
             xmlns:convert="clr-namespace:Iris.Converters" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF" 
             
             xmlns:services="clr-namespace:Iris.Services" 
             d:DataContext="{d:DesignInstance Type=services:MediaFileService}">

---

<!-- Inside your existing Border and StackPanel setup for the analytics section -->
<lvc:CartesianChart Series="{Binding Series}" Height="200">
    <!-- Remove the incorrect Series declaration inside CartesianChart -->
</lvc:CartesianChart>

我引用了正确的库并根据示例创建了图表。

在 C# 代码中：

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting; // For SolidColorPaintTask
using SkiaSharp;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Windows.Media;
using LiveChartsCore.SkiaSharpView.WPF;

namespace Iris.Services
{
    internal class MediaFileService : BaseViewModel
    {
        public ObservableCollection<ISeries> Series { get; set; }
        public ObservableCollection<string> Labels { get; set; }

        public MediaFileService()
        {
            InitializeChartData();
        }

        private void InitializeChartData()
        {
            Series = new ObservableCollection<ISeries>
            {
                new ColumnSeries<int>
                {
                    Values = new ObservableCollection<int> { 0 }, // Initial dummy data
                    Name = "Data Series"
                }
            };

            Labels = new ObservableCollection<string> { "Initial" }; // Initial dummy labels
        }

        public void UpdateChart(Dictionary<string, int> currentObjectCounts)
        {
            // Clear existing series and labels
            Series.Clear();
            Labels.Clear();

            foreach (var item in currentObjectCounts)
            {
                Series.Add(new ColumnSeries<int>
                {
                    Values = new ObservableCollection<int> { item.Value },
                    Name = item.Key,
                    Fill = new SolidColorPaint(new SKColor(0, 0, 255)) // Blue color
                });

                Labels.Add(item.Key);
            }
        }
    }
}

尽管遵循了文档和建议，但该图表并未出现在我的应用程序中。我已经检查了数据绑定，数据正在正确更新，并且 MediaFileService 实例已创建并分配给相关 UI 元素的 DataContext。

有人可以提供有关可能导致图表无法在使用 LiveCharts 2 的 WPF 应用程序中按预期显示的原因的指导吗？

预先感谢您的协助！

这是我在应用程序中看到的屏幕截图：

Answer 1

假设您实际上将

DataContext

 的 

UserControl

 设置为 

MediaFileService

 类的实例，它应该会显示。

您可以直接在 XAML 标记中执行此操作：

<UserControl x:Class="Iris.View.MultimediaEditor"
  ...
  d:DataContext="{d:DesignInstance Type=services:MediaFileService}">
    <UserControl.DataContext>
        <services:MediaFileService />
    </UserControl.DataContext>
</UserControl>

或者您可以通过编程方式设置：

public MultimediaEditor()
{
    InitializeComponent();
    DataContext = new MediaFileService();
}

或者

UserControl

 可以从父元素（例如窗口）继承 

DataContext

。

d:DataContext

属性仅设置仅由Visual Studio中的设计器使用的

设计时间DataContext

。它在运行时不使用。