Question

我正在使用Syncfusion库在Xamarin Forms中创建Donut Chart。我创建了这个，但现在我要在每片甜甜圈上实现一个点击事件？我怎样才能做到这一点？请帮帮我？

这是我的圆环图

的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属性绑定到视图模型。请参阅以下代码段。

<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 Link：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

谢谢， Manivannan E

Answer 2

您需要使用在您选择新数据点（圆环切片）时触发的SelectionChanged事件。

IMPORT FOREIGN SCHEMA

这里有代码：

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

很遗憾，SyncFusion没有提供你可以绑定的命令，所以如果你想避免把东西放到文件后面的代码中，你可能想看看EventToCommandBehavior那个让我们在您的viewmodel中将该事件实现为ICommand。

修改导航更新

根据您的评论，您应该在private void SfChart_OnSelectionChanged(object sender, ChartSelectionEventArgs e) { var chart = sender as SfChart; // Do whatever you want here }方法中导航到新页面，如下所示：

OnSelectionChanged

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

在每个Slice Xamarin上的Syncfusion Donut Chart中点击事件？

2 个答案: