Thiết kế website giá rẻ

Question

I have set Custom Colors for 4 Ranges in Horizontal bar chart and values within each range have specific colors to distinguish, which are 4 Different Colors as Green Color, Yellow Color, Red Color and Black Color. As I set Custom Colors, the Xaxis value of Horizontal bar chart is repeating 2 times.

@using UIDesignBlazorApexChart.Client.Theme
@inject IThemeService ThemeService

<style>
    .apexcharts-tooltip {
        color: black;
    }

    .apexcharts-menu {
        color: black;
    }
</style>
<MudGrid>
    <MudItem xs="12">
<DemoContainer>

    <MudButtonGroup Color="MudBlazor.Color.Default" Variant="Variant.Filled" Size="MudBlazor.Size.Small" Style="margin-bottom:10px;">
                <MudButton FullWidth>@_buttonText</MudButton>
    <MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Style="align-self: auto;">
        @foreach (var appName in AppNames)
        {
            <MudMenuItem OnClick="() => SetButtonText(appName)">@appName.Display</MudMenuItem>
        }
    </MudMenu>
</MudButtonGroup>
          
            <div Style="height:300px;background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(232,229,231,1) 100%);">
            <ApexChart Height="300" @ref=chart TItem="Risk" Title=@GetTitle()  Options=options Debug>

                <ApexPointSeries TItem="Risk"
                         Items="risks"
                     Name="Gross Value"
                     SeriesType="SeriesType.Bar"
                     XValue="@(e => e.Name)"
                     YAggregate="@(e => e.Sum(e => e.Value))"
                                 Color="#64DD17"
                                 PointColor="e=> GetColorForValue(e)" />
</ApexChart>
            </div>

</DemoContainer>
</MudItem></MudGrid>

@code {
    private string GetColorForValue(Risk risk)
    {
        if (risk.Value < 1.25M && risk.Value > 0)
        {
            return "#64DD17"; // Green
        }
        else if (risk.Value < 2.5M && risk.Value >= 1.25M)
        {
            return "#FFB300"; // Orange
        }
        else if (risk.Value < 3.75M && risk.Value >= 2.5M)
        {
            return "#FF0000"; // Red
        }
        else 
        {
            return "#424242"; // Gray
        }
    }
    private ApexChart<Risk> chart;
    private List<Risk> risks { get; set; } = new List<Risk>();
    private string _buttonText = "Quality Data Lake for Reliance from Hexagon ETQ being added to existing SaaS platform for Seeds Reliance";
    private ApexChartOptions<Risk> options;


    private async Task UpdateChart()
    {
        await chart.RenderAsync();
    }
    protected override void OnInitialized()
    {
        risks = new List<Risk>();

        foreach (var item in SampleData.GetOrders())
        {
            risks.Add(new Risk { Name = item.Name, Value = item.Value });
        }

        base.OnInitialized();
        options = new ApexChartOptions<Risk>
            {
                PlotOptions = new PlotOptions
                {
                    Bar = new PlotOptionsBar
                    {
                        Horizontal = true
                    }
                },
                Theme = new Theme
                {
                    Mode = Mode.Light,
                    Palette = PaletteType.Palette1
                }
            };
    }
    
    private List<AppName> AppNames = new List<AppName>()
    {
        new AppName { Value = 1, Display = "Quality Data Lake for Reliance from Hexagon ETQ being added to existing SaaS platform for Seeds Reliance" },
        new AppName { Value = 2, Display = "Application of Smart Trac sensors with 3G/4G mobile network communication for the Tractian Platform"},
        new AppName { Value = 3, Display = "Leadscope Model Applier - Acute Toxicity QSAR Suite"},
        new AppName { Value = 4, Display = "Orion"},
        new AppName { Value = 5, Display = "SynGPT Web and Teams Version (Syngenta's Private ChatGPT Instance)" }
    };
    private int selectedApp = 1;
    private int selectedAppID = 1; // Default selection

    private string GetTitle()
    {
        return "Detailed Risk view for each application ";
    }

    private async Task SetButtonText(AppName selectedAppName)
    {
        _buttonText = selectedAppName.Display;
        selectedAppID = selectedAppName.Value;
        await UpdateChartAsync(selectedAppID);
    }
    private async Task SelectApp(AppName selectedAppName)
    {
        selectedApp = selectedAppName.Value;
        await UpdateChartAsync(selectedApp);
    }
        
    private async Task UpdateChartAsync(int selectedAppID)
    {
        GetOrdersAsync(selectedAppID);
        await chart.RenderAsync();
    }
    private async Task<List<Risk>> GetOrdersAsync(int selectedAppID)
    {
        // Replace this with the appropriate logic based on the selected app
        switch (selectedAppID)
        {
            case 1:
                return risks= await Task.FromResult(SampleData.GetOrders()); // Sample data for the first app
                break;
            case 2:
                return risks = await Task.FromResult(SampleData2.GetOrders()); // Sample data for the second app
                break; 
            case 3:
                return risks = await Task.FromResult(SampleData3.GetOrders()); // Sample data for the second app
                break;
            case 4:
                return risks = await Task.FromResult(SampleData4.GetOrders()); // Sample data for the first app
                break;
            case 5:
                return risks = await Task.FromResult(SampleData5.GetOrders()); // Sample data for the second app
                break; // Add cases for other apps as needed
            default:
                return risks = await Task.FromResult(SampleData.GetOrders()); // Default to the first app's data
                break;
                // Render the chart asynchronously
                await chart.RenderAsync();

        }
    }

    public class Risk
    {
        public string Name { get; set; }
        public decimal Value { get; set; }
    }

    public class AppName
    {
        public int Value { get; set; }
        public string Display { get; set; }
    }

    public static class SampleData
    {
        public static List<Risk> GetOrders()
        {
            var risks = new List<Risk>
            {
                new Risk { Name = "InformationSecurityPolicy", Value = 1.45M },
                new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M },
                new Risk { Name = "HumanResourceSecurity", Value = 1M },
                new Risk { Name = "AssetManagement", Value = 1.8M },
                new Risk { Name = "AccessManagement", Value = 1.45M },
                new Risk { Name = "Cryptography", Value = 1.6M },
                new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M },
                new Risk { Name = "OperationsSecurity", Value = 1.25M },
                new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M },
                new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 3.8M },
                new Risk { Name = "SupplierRelationships", Value = 1.25M },
                new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M },
                new Risk { Name = "BusinessContinuityManagement", Value = 3.2M },
                new Risk { Name = "LegalandRegulatoryRisk", Value = 1M }
            };
      
            return risks;
        }
    }
    public static class SampleData2
    {
        public static List<Risk> GetOrders()
        {
            var risks = new List<Risk>
            {
                new Risk { Name = "InformationSecurityPolicy", Value = 3.45M },
                new Risk { Name = "OrganisationOfInfoSecurity", Value = 1.35M },
                new Risk { Name = "HumanResourceSecurity", Value = 1M },
                new Risk { Name = "AssetManagement", Value = 2.8M },
                new Risk { Name = "AccessManagement", Value = 1.45M },
                new Risk { Name = "Cryptography", Value = 2.6M },
                new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M },
                new Risk { Name = "OperationsSecurity", Value = 1.25M },
                new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M },
                new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 1M },
                new Risk { Name = "SupplierRelationships", Value = 1M },
                new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M },
                new Risk { Name = "BusinessContinuityManagement", Value = 2.5M },
                new Risk { Name = "LegalandRegulatoryRisk", Value = 1M }
            };

            return risks;
        }
    }
    public static class SampleData3
    {
        public static List<Risk> GetOrders()
        {
            var risks = new List<Risk>
            {
                new Risk { Name = "InformationSecurityPolicy", Value = 2.45M },
                new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M },
                new Risk { Name = "HumanResourceSecurity", Value = 1.8M },
                new Risk { Name = "AssetManagement", Value = 1M },
                new Risk { Name = "AccessManagement", Value = 1.6M },
                new Risk { Name = "Cryptography", Value = 1.45M },
                new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M },
                new Risk { Name = "OperationsSecurity", Value = 3.8M },
                new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M },
                new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 2M },
                new Risk { Name = "SupplierRelationships", Value = 1.25M },
                new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M },
                new Risk { Name = "BusinessContinuityManagement", Value = 3.2M },
                new Risk { Name = "LegalandRegulatoryRisk", Value = 1M }
            };

            return risks;
        }
    }
    public static class SampleData4
    {
        public static List<Risk> GetOrders()
        {
            var risks = new List<Risk>
            {
                new Risk { Name = "InformationSecurityPolicy", Value = 1.45M },
                new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M },
                new Risk { Name = "HumanResourceSecurity", Value = 1.8M },
                new Risk { Name = "AssetManagement", Value = 1M },
                new Risk { Name = "AccessManagement", Value = 1.6M },
                new Risk { Name = "Cryptography", Value = 1.45M },
                new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M },
                new Risk { Name = "OperationsSecurity", Value = 3.8M },
                new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M },
                new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 3.5M },
                new Risk { Name = "SupplierRelationships", Value = 1.25M },
                new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M },
                new Risk { Name = "BusinessContinuityManagement", Value = 3.2M },
                new Risk { Name = "LegalandRegulatoryRisk", Value = 1M }
            };

            return risks;
        }
    }
    public static class SampleData5
    {
        public static List<Risk> GetOrders()
        {
            var risks = new List<Risk>
            { 
                new Risk { Name = "InformationSecurityPolicy", Value = 2.45M },
                new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M },
                new Risk { Name = "HumanResourceSecurity", Value = 1.8M },
                new Risk { Name = "AssetManagement", Value = 1M },
                new Risk { Name = "AccessManagement", Value = 1.6M },
                new Risk { Name = "Cryptography", Value = 1.45M },
                new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M },
                new Risk { Name = "OperationsSecurity", Value = 3.8M },
                new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M },
                new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 2M },
                new Risk { Name = "SupplierRelationships", Value = 1.25M },
                new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M },
                new Risk { Name = "BusinessContinuityManagement", Value = 3.2M },
                new Risk { Name = "LegalandRegulatoryRisk", Value = 1M }
            };

            return risks;
        }
    }
}

I want X-axis as 0, 0.5,1,1.5,2,2.5,3,3.5,4….. But it is displaying as 0,1,1,2,2,3,3,4,4…. I have tried using apexchart nuget package as well as apexchart.js facing the same issues in both sides. How to Fix This Issue?

Thiết kế website giá rẻ

Danh mục

ApexChart Horizontal barchart Xaxis repetition Issue