How to change the Data Label of Syncfusion's .NET MAUI SfCircularChart to display as a percentage of the slice size?

huangapple go评论82阅读模式
英文:

How to change the Data Label of Syncfusion's .NET MAUI SfCircularChart to display as a percentage of the slice size?

问题

我没有找到可以设置为“Percentage”的LabelContent属性,我认为这在Xamarin中是可用的?我还尝试了一下LabelFormat属性,但是在.NET MAUI的官方文档中,没有找到我在网上找到的示例。唯一提到可能可行的地方在这个页面的底部,但没有展示如何实现它。

英文:

I have not found a property like LabelContent that can be set to Percentage which I believe is available in Xamarin? I also tried playing around with the LabelFormat property but there's no documentation showing examples that I've found online for .NET MAUI. The only mention of it being possible is at the bottom of this page but it doesn't show how it was done.

答案1

得分: 1

以下是您要的翻译部分:

这可以通过像下面这样设置`ChartDataLabelStyle`的`LabelFormat="0'%"`来实现:

<chart:SfCircularChart>
      
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}" ShowDataLabels="True" 
                            XBindingPath="Country" 
                            YBindingPath="Counts">
            <chart:PieSeries.DataLabelSettings>
                <chart:CircularDataLabelSettings>
                    <chart:CircularDataLabelSettings.LabelStyle>
                        <chart:ChartDataLabelStyle LabelFormat="0'%"/>
                    </chart:CircularDataLabelSettings.LabelStyle>
                </chart:CircularDataLabelSettings>
            </chart:PieSeries.DataLabelSettings>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

以下是您可以参考的步骤:

#1:
安装Syncfusion.Maui.Charts

#2:
MauiProgram.cs中注册处理程序:

 public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
    .UseMauiApp<App>()
     //添加这一行
    .ConfigureSyncfusionCore()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });

    return builder.Build();
}

#3:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppChart.MainPage"
             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts" 
             xmlns:viewModel="clr-namespace:MauiAppChart.ViewModel"
             >

    <Grid HorizontalOptions="FillAndExpand" Padding="20" BackgroundColor="White" VerticalOptions="FillAndExpand">
        <chart:SfCircularChart>
            <chart:SfCircularChart.BindingContext>
                <viewModel:ViewModel/>
            </chart:SfCircularChart.BindingContext>
            <chart:SfCircularChart.Legend>
                <chart:ChartLegend Placement="Right" />
            </chart:SfCircularChart.Legend>
            <chart:SfCircularChart.Title>
                <Label Text="Rural population of various countries" FontSize="Large" Margin="5,10,5,10" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand"></Label>
            </chart:SfCircularChart.Title>
            <chart:SfCircularChart.Series>
                <chart:PieSeries ItemsSource="{Binding Data}" ShowDataLabels="True"
                                XBindingPath="Country" 
                                YBindingPath="Counts">
                    <chart:PieSeries.DataLabelSettings>
                        <chart:CircularDataLabelSettings>
                            <chart:CircularDataLabelSettings.LabelStyle>
                                <chart:ChartDataLabelStyle LabelFormat="0'%"/>
                            </chart:CircularDataLabelSettings.LabelStyle>
                        </chart:CircularDataLabelSettings>
                    </chart:PieSeries.DataLabelSettings>
                </chart:PieSeries>
            </chart:SfCircularChart.Series>
        </chart:SfCircularChart>
    </Grid>

</ContentPage>

#4:

ViewModel.cs:

using System; 
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiAppChart.ViewModel
{
    public class ViewModel
    {
        public ObservableCollection<Model> Data { get; set; }
        public ObservableCollection<Brush> CustomBrushes { get; set; }
        public ViewModel()
        {
            Data = new ObservableCollection<Model>()
            {
                new Model("Algeria", 28),
                new Model("Australia", 14),
                new Model("Bolivia", 31),
                new Model("Cambodia", 77),
                new Model("Canada", 19),
            };

            CustomBrushes = new ObservableCollection<Brush>()
            {
               new SolidColorBrush(Color.FromArgb("#314A6E")),
                 new SolidColorBrush(Color.FromArgb("#48988B")),
                 new SolidColorBrush(Color.FromArgb("#5E498C")),
                 new SolidColorBrush(Color.FromArgb("#74BD6F")),
                 new SolidColorBrush(Color.FromArgb("#597FCA"))
            };
        }
    }


    public class Model
    {
        public string Country { get; set; }

        public double Counts { get; set; }

        public Model(string name, double count)
        {
            Country = name;
            Counts = count;
        }
    }
}

输出:
How to change the Data Label of Syncfusion's .NET MAUI SfCircularChart to display as a percentage of the slice size?

英文:

This can be achieved by setting LabelFormat=&quot;0&#39;%&quot; of the ChartDataLabelStyle like below:


&lt;chart:SfCircularChart&gt;
      
            &lt;chart:SfCircularChart.Series&gt;
                &lt;chart:PieSeries ItemsSource=&quot;{Binding Data}&quot; ShowDataLabels=&quot;True&quot; 
                                    XBindingPath=&quot;Country&quot; 
                                    YBindingPath=&quot;Counts&quot;&gt;
                    &lt;chart:PieSeries.DataLabelSettings&gt;
                        &lt;chart:CircularDataLabelSettings&gt;
                            &lt;chart:CircularDataLabelSettings.LabelStyle&gt;
                                &lt;chart:ChartDataLabelStyle LabelFormat=&quot;0&#39;%&quot;/&gt;
                            &lt;/chart:CircularDataLabelSettings.LabelStyle&gt;
                        &lt;/chart:CircularDataLabelSettings&gt;
                    &lt;/chart:PieSeries.DataLabelSettings&gt;
                &lt;/chart:PieSeries&gt;
            &lt;/chart:SfCircularChart.Series&gt;
 &lt;/chart:SfCircularChart&gt;

Below is the step you can refer to:

#1:
Install the Syncfusion.Maui.Charts.

#2:
Register the handler in MauiProgram.cs:

 public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp&lt;App&gt;()
             //add this line
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =&gt;
            {
                fonts.AddFont(&quot;OpenSans-Regular.ttf&quot;, &quot;OpenSansRegular&quot;);
            });

            return builder.Build();
        }

#3:

MainPage.xaml:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt; 
&lt;ContentPage xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
             xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
             x:Class=&quot;MauiAppChart.MainPage&quot;
               xmlns:chart=&quot;clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts&quot; 
             xmlns:viewModel =&quot;clr-namespace:MauiAppChart.ViewModel&quot;
             &gt;

    &lt;Grid HorizontalOptions=&quot;FillAndExpand&quot; Padding=&quot;20&quot; BackgroundColor=&quot;White&quot; VerticalOptions=&quot;FillAndExpand&quot;&gt;
        &lt;chart:SfCircularChart&gt;
            &lt;chart:SfCircularChart.BindingContext&gt;
                &lt;viewModel:ViewModel/&gt;
            &lt;/chart:SfCircularChart.BindingContext&gt;
            &lt;chart:SfCircularChart.Legend&gt;
                &lt;chart:ChartLegend Placement=&quot;Right&quot; /&gt;
            &lt;/chart:SfCircularChart.Legend&gt;
            &lt;chart:SfCircularChart.Title&gt;
                &lt;Label Text=&quot;Rural population of various countries&quot; FontSize=&quot;Large&quot; Margin=&quot;5,10,5,10&quot; HorizontalTextAlignment=&quot;Center&quot; HorizontalOptions=&quot;FillAndExpand&quot;&gt;&lt;/Label&gt;
            &lt;/chart:SfCircularChart.Title&gt;
            &lt;chart:SfCircularChart.Series&gt;
                &lt;chart:PieSeries ItemsSource=&quot;{Binding Data}&quot; ShowDataLabels=&quot;True&quot;
                                    XBindingPath=&quot;Country&quot; 
                                    YBindingPath=&quot;Counts&quot;&gt;
                    &lt;chart:PieSeries.DataLabelSettings&gt;
                        &lt;chart:CircularDataLabelSettings&gt;
                            &lt;chart:CircularDataLabelSettings.LabelStyle&gt;
                                &lt;chart:ChartDataLabelStyle LabelFormat=&quot;0&#39;%&quot;/&gt;
                            &lt;/chart:CircularDataLabelSettings.LabelStyle&gt;
                        &lt;/chart:CircularDataLabelSettings&gt;
                    &lt;/chart:PieSeries.DataLabelSettings&gt;
                &lt;/chart:PieSeries&gt;
            &lt;/chart:SfCircularChart.Series&gt;
        &lt;/chart:SfCircularChart&gt;
    &lt;/Grid&gt;

&lt;/ContentPage&gt;

#4:

ViewModel.cs:

using System; 
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiAppChart.ViewModel
{
    public class ViewModel
    {
        public ObservableCollection&lt;Model&gt; Data { get; set; }
        public ObservableCollection&lt;Brush&gt; CustomBrushes { get; set; }
        public ViewModel()
        {
            Data = new ObservableCollection&lt;Model&gt;()
            {
                new Model(&quot;Algeria&quot;, 28),
                new Model(&quot;Australia&quot;, 14),
                new Model(&quot;Bolivia&quot;, 31),
                new Model(&quot;Cambodia&quot;, 77),
                new Model(&quot;Canada&quot;, 19),
            };

            CustomBrushes = new ObservableCollection&lt;Brush&gt;()
            {
               new SolidColorBrush(Color.FromArgb(&quot;#314A6E&quot;)),
                 new SolidColorBrush(Color.FromArgb(&quot;#48988B&quot;)),
                 new SolidColorBrush(Color.FromArgb(&quot;#5E498C&quot;)),
                 new SolidColorBrush(Color.FromArgb(&quot;#74BD6F&quot;)),
                 new SolidColorBrush(Color.FromArgb(&quot;#597FCA&quot;))
            };
        }
    }


    public class Model
    {
        public string Country { get; set; }

        public double Counts { get; set; }

        public Model(string name, double count)
        {
            Country = name;
            Counts = count;
        }
    }
}

The Output:
How to change the Data Label of Syncfusion's .NET MAUI SfCircularChart to display as a percentage of the slice size?

答案2

得分: 1

我最终直接给Syncfusion发送了电子邮件,他们告诉我这个问题没有内置解决方案。但是你可以重写DrawDatalabel函数以实现与此处所见相同的结果
英文:

I ended up emailing Syncfusion directly and they informed me there is no built-in solution for this problem. However you can override the DrawDatalabel function to achieve the same result as seen here:

public class DoughnutSeriesExt : DoughnutSeries

{
    protected override void DrawDataLabel(ICanvas canvas, Brush fillcolor, string label, PointF point, int index)
    {
        double totalValues = 0;
        foreach (var item in this.ItemsSource as ObservableCollection&lt;Model&gt;)
        {
            totalValues += item.Count;
        }

        var currentDataPoint = Double.Parse(label.Replace(&quot;%&quot;, &quot;&quot;));
        label = ValueToPercentage.Converter(currentDataPoint, totalValues);
        base.DrawDataLabel(canvas, fillcolor, label, point, index);
    }
}

internal static class ValueToPercentage
{
    public static string Converter(double value, double totalValue)
    {
        return Math.Round(value / totalValue * 100, 2) + &quot;%&quot;;
    }
}

huangapple
  • 本文由 发表于 2023年2月8日 22:27:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75387220.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定