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

Question

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

这是我的 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

您需要使用 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));
}

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

Answer 2

@aman 和@hankide

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

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

视图模型代码：

    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 Link :https://help.syncfusion.com/xamarin/sfchart/selection

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

谢谢，马尼瓦南 E

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

On Click Event in Syncfusion Doughnut Chart on every Slice Xamarin?

charts

syncfusion

xamarin

xamarin.forms