Question

我正在尝试制作一个图表（UWP-c＃），该图表在源数据更改时会动态更改。

例如：

xaml文件：

<StackPanel>
        <Button Name="scatterButton" Content="click" Click="ScatterButton_Click" />
        <Charting:Chart x:Name="test_chart">
            <Charting:ScatterSeries IndependentValuePath="Name" DependentValuePath="Amount"  />
        </Charting:Chart>
    </StackPanel>

c＃：

    public class SmartPhone
{
    public string Name { get; set; }
    public int Amount { get; set; }
    public int Other { get; set; }
}

public sealed partial class MainPage : Page 
{

    List<SmartPhone> lstSource = new List<SmartPhone>
    {
        new SmartPhone() { Name = "IPhone", Amount = 40, Other = 1 },
        new SmartPhone() { Name = "Android", Amount = 30, Other = 1 },
        new SmartPhone() { Name = "UWP", Amount = 25, Other = 2 }
    };

    public MainPage()
    {
        this.InitializeComponent();
    }

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        LoadChartContent();
    }

    private void LoadChartContent()
    {
        (test_chart.Series[0] as ScatterSeries).ItemsSource = lstSource;
    }

    private void ScatterButton_Click(object sender, RoutedEventArgs e)
    {
        lstSource[0].Amount = 10;
    }
}

想法是，当我单击“金额”值更改按钮时，我想在图表中看到它的更改。

我尝试了许多软件包，但这是UWP中唯一对我有用的软件包。 NuGet是“ WinRTXamlToolkit.Controls.DataVisualization”。请尝试关注“ ScatterSeries”，因为这是我需要的。

谢谢。

Answer 1

首先，您应该使用ObservableCollection而不是List来自动通知何时添加或删除项目。要通知更改，您必须实现INotifyPropertyChanged并引发PropertyChanged事件。

xaml：

        <Charting:Chart x:Name="test_chart">
            <Charting:ScatterSeries ItemsSource="{x:Bind LstSource}" IndependentValuePath="Name" DependentValuePath="Amount"  />
        </Charting:Chart>

SmartPhone类示例：

public class SmartPhone : INotifyPropertyChanged
    {
        private int _amount;

        public string Name { get; set; }

        public int Amount
        {
            get { return _amount; }
            set
            {
                this._amount = value;
                NotifyPropertyChanged();
            }
        }

        public int Other { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

MainPage类：

    public sealed partial class MainPage : Page
    {

        public ObservableCollection<SmartPhone> LstSource
        {
            get { return lstSource; }
        }

        private ObservableCollection<SmartPhone> lstSource = new ObservableCollection<SmartPhone>
        {
            new SmartPhone() {Name = "IPhone", Amount = 10, Other = 1},
            new SmartPhone() {Name = "Android", Amount = 30, Other = 1},
            new SmartPhone() {Name = "UWP", Amount = 25, Other = 2}
        };


        public MainPage()
        {
            this.InitializeComponent();
            //LoadChartContent();
        }

        private void ScatterButton_Click(object sender, RoutedEventArgs e)
        {
            lstSource[0].Amount = 30;
            //lstSource.Add(new SmartPhone{Amount = 10, Name = "asd", Other = 2});

        }
    }

我希望这就是您所需要的。

UWP c＃更改数据时动态更改图表

1 个答案: