向 Blazor Bootstrap 饼图添加数据标签

Question

我正在按照 Blazor Bootstrap 演示创建饼图：https://docs.blazorbootstrap.com/data-visualization/pie-chart

我可以成功制作常规饼图，但是，我无法将数据标签添加到图表中的每个切片。我添加了以下几行：

await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" });

...和

dataset1.Datalabels.Anchor = "end";

...添加数据标签（如教程中所示），但我遇到了错误：

Microsoft.JSInterop.JSException: ChartDataLabels is not defined

我已经完全按照 Bootstrap 教程进行操作，并尝试直接复制并粘贴演示中的代码，但没有成功。

如果有人知道如何向 Blazor Bootstrap 饼图添加数据标签，我们将不胜感激！

谢谢。

Answer 1

这可能有点晚了，但您可以直接在 ChartData 对象中设置标签。

例如：

List<double> data = new List<double>();
List<string> labels = new List<string>();

foreach(var countryGroup in _db.Participants.GroupBy(a=>a.Country))
{
    data.Add(countryGroup.Count());
    labels.Add(countryGroup.Key);
}        

PieChartDataset dataset = new PieChartDataset() { Data = data };

ChartData chartData = new ChartData();
chartData.Datasets = new List<IChartDataset>() { dataset };    
chartData.Labels = labels;