使用WPF和LVC（LiveCharts）在餅圖或其他圖表中具有n個楔形

Question

我一直在嘗試使用LVC合並餅圖，並且效果很好。 我一直在玩這個簡單的代碼。

<UserControl x:Class="UI.PieChart"
             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:UI"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="500"
             d:DataContext = "{d:DesignInstance local:PieChart}">
    <Grid>
        <lvc:PieChart LegendLocation="Bottom" DataClick="Chart_OnDataClick" Hoverable="False" DataTooltip="{x:Null}">
            <lvc:PieChart.Series>
                <lvc:PieSeries Name ="Portion" Title="Maria" Values="3" DataLabels="True"
                               LabelPoint="{Binding PointLabel0}"/>
                <lvc:PieSeries Title="Charles" Values="4" DataLabels="True" 
                               LabelPoint="{Binding PointLabel1}"/>
                <lvc:PieSeries Title="Frida" Values="6" DataLabels="True" 
                               LabelPoint="{Binding PointLabel2}"/>
                <lvc:PieSeries Title="Frederic" Values="2" DataLabels="True" 
                               LabelPoint="{Binding PointLabel3}"/>
            </lvc:PieChart.Series>
        </lvc:PieChart>
    </Grid>
</UserControl>

以及激活用戶操作的此代碼... .xaml.cs

namespace UI
{
    /// <summary>
    /// Interaction logic for DataChart.xaml
    /// </summary>
    public partial class PieChart : UserControl
    {
        public PieChart()
        {
            InitializeComponent();
            PieSeries()
            PointLabel = chartPoint =>
                            string.Format("{0} ({1:P})", chartPoint.Y, chartPoint.Participation);

            DataContext = this;
        }
        public Func<ChartPoint, String> PointLabel { get; set;}

        private void Chart_OnDataClick(object sender, ChartPoint chartpoint)
        {
            var chart = (LiveCharts.Wpf.PieChart) chartpoint.ChartView;

            foreach (PieSeries series in chart.Series)
                series.PushOut = 0;
            var selectedSeries = (PieSeries)chartpoint.SeriesView;
            selectedSeries.PushOut = 8;
        }
    }
}

我對C＃、. xaml，WPF和LVC完全陌生。但是，我想做的並不是硬編碼PIE圖表中的楔形數量。 相反，我想根據給出的數據創建一個餅圖。 我想用C＃做到這一點。 我在哪里實例化類PieChart（）。 我可以在PieChart（5）這樣的參數中傳遞5。 然后，將創建PieChart，然后繼續創建5個PieSeries或5個楔形...側面的問題，是否有比LVC甚至WPF更好的工具呢？

Answer 1

一種方法是創建一個SeriesCollection，根據一些用戶輸入為此添加一個PieSeries列表，並將XAML中的PieChart綁定到SeriesCollection。 您還需要實現INotifyPropertyChanged，以確保對SeriesCollection的更改反映在用戶界面中（此處在RaisePropertyChanged中實現）：

您將綁定到的SeriesCollection：

    private SeriesCollection myPie = new SeriesCollection();
    public SeriesCollection MyPie
    {
        get
        {
            return myPie;
        }
        set
        {
            myPie = value;
            RaisePropertyChanged("MyPie");
        }
    }

處理某些用戶輸入的代碼（此處基於具有屬性Value的UserInput類）。 切片的數量將等於您添加到SeriesCollection的PieSeries的數量：

foreach(item in UserInput)
{
    MyPie.Add(new PieSeries { Values = new ChartValues<int> { item.Value }, DataLabels = true };
}

在您的XAML中，將SeriesCollection綁定到PieChart：

<lvc:PieChart Series="{Binding MyPie}"/>