在每个切片 Xamarin 上的 Syncfusion 甜甜圈图表中单击事件？

Question

我正在使用 Syncfusion 库在 Xamarin 表单中创建圆环图。我已经创建了它，但是现在我要在每一片甜甜圈上实现一个 On click 事件？我怎样才能做到这一点？请帮帮我？

这是我的圆环图 XAML 页面

<StackLayout>
    <RelativeLayout x:Name="relativeLayout">
        <Label x:Name="myLabel"
               Text="US Sales Total"
               FontSize="30"
               TextColor="White"
               RelativeLayout.XConstraint =
  "{ConstraintExpression Type=RelativeToParent,
                         Property=Width,
                         Factor=0.5,
                         Constant=-260}"
RelativeLayout.YConstraint =
  "{ConstraintExpression Type=RelativeToParent,
                         Property=Height,
                         Factor=0.5,
                         Constant=-380 }" />

        <Label Text="1234"
               FontSize="30"
               TextColor="White"
               RelativeLayout.XConstraint =
  "{ConstraintExpression Type=RelativeToParent,
                         Property=Width,
                         Factor=0.5,
                         Constant = +200 }"
RelativeLayout.YConstraint =
  "{ConstraintExpression Type=RelativeToParent,
                         Property=Height,
                         Factor=0.5,
                         Constant=-380 }" />


        <chart:SfChart x:Name="sfchart" 
                 BackgroundColor="Transparent"
                 HorizontalOptions="FillAndExpand" 
                 VerticalOptions="FillAndExpand" 
                 RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}">
            <chart:SfChart.PrimaryAxis >
                <chart:CategoryAxis/>
            </chart:SfChart.PrimaryAxis>
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis/>
            </chart:SfChart.SecondaryAxis>
            <chart:SfChart.Series>
                <chart:DoughnutSeries x:Name="series1"
                            CircularCoefficient="0.8"
                            DoughnutCoefficient="0.4"
                            StartAngle="0"                                
                            EndAngle="360"
                            EnableDataPointSelection="True"

                            DataMarkerPosition="Inside">
                    <chart:DoughnutSeries.DataMarker>
                        <chart:ChartDataMarker ShowLabel="true" LabelContent="YValue"  />
                    </chart:DoughnutSeries.DataMarker>
                </chart:DoughnutSeries>
            </chart:SfChart.Series>
        </chart:SfChart>
    </RelativeLayout>
</StackLayout>

Answer 1

@aman 和 @hankide

我们也有针对此要求的替代解决方案，您可以借助 ChartSeries 中的 SelectedDataPointIndex 属性使用 MVVM 模式来实现此要求。我们需要将直接 SelectedDataPointIndex 属性绑定到视图模型。请参考以下代码sn-p。

<chart:DoughnutSeries CircularCoefficient="0.8"
                     DoughnutCoefficient="0.4"
                     StartAngle="0"                                
                     EndAngle="360"
                     EnableDataPointSelection="True"
                     DataMarkerPosition="Inside"
                     SelectedDataPointIndex = "{Binding SelectedSlicePage, Mode=TwoWay}">

ViewModel 代码：

    private int selectedSlicePage = -1;
    public int SelectedSlicePage
    {
        get
        {
            return selectedSlicePage;
        }

        set
        {
            if (value != selectedSlicePage)
            {
                selectedSlicePage = value;
                NavigateSelectedSlicePage(selectedSlicePage);
            }
        }
    }

    void NavigateSelectedSlicePage(int selectedSlice)
    {
        // Do whatever you want here
    }

UG链接：https://help.syncfusion.com/xamarin/sfchart/selection

API 链接：http://help.syncfusion.com/cr/cref_files/xamarin/sfchart/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.ChartSeries~SelectedDataPointIndex.html

谢谢， 马尼文南E

Answer 2

您需要使用SelectionChanged 事件，只要您选择了一个新数据点（甜甜圈切片）就会触发该事件。

<chart:SfChart x:Name="sfchart" 
               SelectionChanged="SfChart_OnSelectionChanged"
               BackgroundColor="Transparent"
               HorizontalOptions="FillAndExpand" 
               ...

下面是代码：

private void SfChart_OnSelectionChanged(object sender, ChartSelectionEventArgs e)
{
    var chart = sender as SfChart;
    // Do whatever you want here
}

很遗憾 SyncFusion 没有提供您可以绑定的命令，因此如果您想避免将内容放入文件后面的代码中，您可能需要查看EventToCommandBehavior，让我们将事件实现为视图模型中的 ICommand。

---

编辑：导航更新

根据您的评论，您应该在 OnSelectionChanged 方法中导航到新页面，如下所示：

private void SfChart_OnSelectionChanged(object sender, ChartSelectionEventArgs e)
{
    var selectedSliceIndex = e.SelectedDataPointIndex;
    Navigation.PushAsync(new SomeNewPage(selectedSliceIndex));
}

如何定义导航到的新页面取决于您，但您很可能希望将选定的甜甜圈切片索引或其他一些信息传递给该页面。上面的代码将帮助您入门。