При событии щелчка в кольцевой диаграмме Syncfusion на каждом фрагменте Xamarin?

Я использую библиотеку 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>

xamarin xamarin.forms charts syncfusion
person aman    schedule 28.08.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам необходимо использовать 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));
}

Вам решать, как вы определяете новую страницу, на которую вы переходите, но вы, скорее всего, захотите передать выбранный индекс фрагмента пончика или другую информацию на страницу. Приведенный выше код поможет вам начать работу.

person Timo Salomäki    schedule 28.08.2017
comment
Я хочу открыть другую страницу XAML, щелкнув любой кусок пончика ?? и где я должен определить этот код XAML? - person aman; 28.08.2017
comment
@aman Я обновил свой ответ. SomeNewPage - это просто новая страница ContentPage, которую вы добавляете через Add New Item диалоговое окно в Visual Studio. Там вы можете определить любой XAML, который хотите показать на этой странице. - person Timo Salomäki; 28.08.2017
comment
Спасибо, приятель. Я застрял в этой проблеме последние 2 дня. - person aman; 28.08.2017
comment
не могли бы вы сказать мне еще кое-что ?? Я хочу, чтобы указанная выше страница XAML работала одинаково на всех размерах устройств в android и ios ?? что мне нужно сделать для этого? - person aman; 28.08.2017
comment
@aman Xamarin.Forms в значительной степени заботится о масштабировании страницы XAML для соответствия различным размерам устройств. Вам просто нужно правильно построить пользовательский интерфейс. Я вижу, что вы уже используете такие вещи, как HorizontalOptions="FillAndExpand", поэтому пользовательский интерфейс, вероятно, уже отлично работает на любом устройстве. Если у вас есть конкретная проблема со страницей и с тем, как она работает на разных устройствах, не стесняйтесь задавать новый вопрос. :) - person Timo Salomäki; 28.08.2017

arrow_upward
3
arrow_downward

@aman и @hankide

У нас также есть альтернативное решение для этого требования, вы можете выполнить это требование, используя шаблон MVVM с помощью свойства SelectedDataPointIndex в ChartSeries. Нам нужно привязать прямое свойство 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: 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

Спасибо, Маниваннан Э.

person Manivannan Elangovan    schedule 29.08.2017
comment
Не знал об этом, определенно лучшее решение проблемы. - person Timo Salomäki; 29.08.2017