.net 在Blazor Radzen中设置ChartComponent以获得每个值的属性计数

6l7fqoea  于 2022-11-19  发布在  .NET
关注(0)|答案(1)|浏览(120)

我有一个

public IEnumerable<Project> Projects;

项目具有多个属性,其中一个属性为“projectStatus
项目可以有5种状态之一(打开、关闭、进行中、已删除、新建)
我想有一个ChartComponent,显示在每种状态的项目数量。
但是我不知道如何设置

<RadzenChart>

                    <RadzenColumnSeries Data="@Projects" CategoryProperty="projectStatus" Title="Status" LineType="LineType.Dashed" ValueProperty="projectStatus.Count()">
                        <RadzenSeriesDataLabels Visible="true"/>
                    </RadzenColumnSeries>

                </RadzenChart>

我使用https://blazor.radzen.com/docs/guides/components/chart.html中的文档作为参考
我希望X轴有5列(每种状态),Y轴有每种状态的项目数量

brccelvz

brccelvz1#

您可以创建一个单独的列表来处理RadzenColumnSeries。该列表属于一个具有两个属性的类,它们是:

  • 状态:as CategoryProperty(状态值为字符串,例如打开、关闭...)
  • 项目:ValueProperty(处于当前状态的项目数)

然后为每种状态创建一个物料,并指定处于该状态的项目数。

projectStatus = new[]
{
    new DataItem()
    {
        Status = "Open"
        Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.OPEN)
    },
    new DataItem()
    {
        Status = "Closed"
        Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.CLOSED)
    },
    
    //...
};

工作示例:

@page "/chart"

<div class="container">
    <div class="row">
        <div class="col-sm-12 my-5">
            <RadzenChart>
                <RadzenColumnSeries Data="@projectStatus" 
                                    CategoryProperty="Status" 
                                    Title="Projects" 
                                    LineType="LineType.Dashed" 
                                    ValueProperty="Projects">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenColumnSeries>
                <RadzenColumnOptions Radius="5" />
                <RadzenValueAxis Min="0" 
                                 Max="@maxValue"/>
            </RadzenChart>
        </div>
    </div>
</div>

@code {
    bool showDataLabels = true;
    List<Project> projects { get; set; }
    DataItem[] projectStatus { get; set; }
    int maxValue;
    
    protected override void OnInitialized()
    {
        projects = new List<Project>();
        projects.Add(new Project(ProjectStatus.OPEN));
        projects.Add(new Project(ProjectStatus.CLOSED));
        projects.Add(new Project(ProjectStatus.IN_PROGRESS));
        projects.Add(new Project(ProjectStatus.DELETED));
        projects.Add(new Project(ProjectStatus.NEW));
        projects.Add(new Project(ProjectStatus.NEW));
        projects.Add(new Project(ProjectStatus.OPEN));

        projectStatus = new[]
        {
            new DataItem()
            {
                Status = ProjectStatus.OPEN.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.OPEN)
            },
            new DataItem()
            {
                Status = ProjectStatus.CLOSED.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.CLOSED)
            },
            new DataItem()
            {
                Status = ProjectStatus.IN_PROGRESS.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.IN_PROGRESS)
            },
            new DataItem()
            {
                Status = ProjectStatus.DELETED.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.DELETED)
            },
            new DataItem()
            {
                Status = ProjectStatus.NEW.ToString(),
                Projects = projects.Count(x => x.ProjectStatus == ProjectStatus.NEW)
            }
        };

        maxValue = projectStatus.Max(x => x.Projects);
        base.OnInitialized();
    }

    class DataItem
    {
        public string Status { get; set; }
        public int Projects { get; set; }
    }

    public class Project
    {
        public Project(ProjectStatus status)
        {
            this.ProjectStatus = status;
        }
        
        public ProjectStatus ProjectStatus { get; set; }
    }

    public enum ProjectStatus
    {
        OPEN, 
        CLOSED, 
        IN_PROGRESS, 
        DELETED, 
        NEW
    }
}

结果:

相关问题