如何使用 Chart JS for Blazor 导入圆环图？

Question

我在 ASP.NET Blazor 页面上使用 Chart.js 实现了一个饼图。现在我想把我的图表改成圆环图。

但是没有适合导入圆环图的组件。

@using ChartJs.Blazor.donutChart //This is not correct.I tried like this

请帮我把饼图换成donutChart.Thank你

@page "/counter"

@using ChartJs.Blazor.PieChart

<h1>Pie Chart Example</h1>

<Chart  Config="_config"></Chart>

@code{
    private PieConfig _config;

    protected override void OnInitialized()
    {
        _config = new PieConfig
        {
            Options = new PieOptions
            {
                Responsive = true,
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "ChartJs.Blazor Pie Chart"
                }
            }
        };

        foreach (string color in new[] { "Red", "Yellow", "Green", "Blue" })
        {
            _config.Data.Labels.Add(color);
        }

        PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 })
        {
             BackgroundColor = new[]
                {
                    ColorUtil.ColorHexString(255, 99, 132), // Slice 1 aka "Red"
                    ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow"
                    ColorUtil.ColorHexString(75, 192, 192), // Slice 3 aka "Green"
                    ColorUtil.ColorHexString(54, 162, 235), // Slice 4 aka "Blue"
                }
        };

        _config.Data.Datasets.Add(dataset);
    }

}

Answer 1

引用 Doughnut and Pie Charts docs

Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.

代码中的更改：

protected override void OnInitialized()
{
    _config = new PieConfig
    {
        Options = new PieOptions
        {
            CutoutPercentage = 50, //<--- HERE!
            Responsive = true,
            Title = new OptionsTitle
            {                    
                Display = true,
                Text = "ChartJs.Blazor Pie Chart"
            }
        }
    };

结果：