英文:
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;
}
}
}
英文:
This can be achieved by setting LabelFormat="0'%"
of the ChartDataLabelStyle
like below:
<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>
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<App>()
//add this line
.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;
}
}
}
答案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<Model>)
{
totalValues += item.Count;
}
var currentDataPoint = Double.Parse(label.Replace("%", ""));
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) + "%";
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论