根据范围值更改条形图的颜色

Question

如何根据值范围改变图表中条形的颜色？

例子： 我正在使用 Blazor WebAssembly App 项目和图表包 -PSC.Blazor.Components.Chartjs -Version 6.0.40.

我想将条形和边框颜色更改为：

• 绿色如果

  Value

  是0-1.25，
• 橙色如果

  Value

  是1.25-2.5
• 红色如果

  Value

  是2.5-3.75
• 黑色如果

  Value

  是3.75-5.

这是我的模型代码：

public class DataItem
{
    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("value")]
    public decimal? Value { get; set; }

    [JsonPropertyName("bordercolor")]
    public string? BorderColor { get; set; }

    [JsonPropertyName("backgroundcolor")]
    public string? BackgroundColor { get; set; }
}

这是我的数据代码：

public class BarDataExample
{
    public static List<DataItem> SimpleBar = new List<DataItem>() 
    {
        new DataItem() { Name = "Info", Value = 1.0m, BackgroundColor="", BorderColor=""},
        new DataItem() { Name = "Org", Value = 1.0m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "HR", Value = 1.4m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "AM", Value = 2.4m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Acc", Value = 2.0m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Cryp", Value = 5.6m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Phy", Value = 3.0m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Oper", Value = 6.7m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Comm", Value = 6.9m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Sys", Value = 3.8m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Sup", Value = 8.7m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Sec", Value = 7.5m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Busi", Value = 8.5m, BackgroundColor="", BorderColor="" },
        new DataItem() { Name = "Legal", Value = 7.9m, BackgroundColor="", BorderColor="" } 
    };
}

这是我的剃须刀代码：

@page "/horizontalbar"

@using BlazorCharts.Data;

<h3>HorizontalBar</h3>

<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>

@code {
private BarChartConfig? _config1;
private Chart? _chart1;

protected override async Task OnInitializedAsync()
{
    _config1 = new BarChartConfig()
    {
        Options = new Options()
        {
            IndexAxis = "y",
            Responsive = true,
            MaintainAspectRatio = false,
            Plugins = new Plugins()
            {
                Legend = new Legend()
                {
                    Align = Align.Center,
                    Display = false,
                    Position = LegendPosition.Right
                }
            },
            Scales = new Dictionary<string, Axis>()
            {
                {
                    Scales.XAxisId, new Axis()
                    {
                        Stacked = true,
                        Ticks = new Ticks()
                        {
                            MaxRotation = 0,
                            MinRotation = 0
                        }
                    }
                },
                {
                    Scales.YAxisId, new Axis()
                    {
                        Stacked = true
                    }
                }
            }
        }
    };

    _config1.Data.Labels = BarDataExample.SimpleBar.Select(e => e.Name).ToList();
    _config1.Data.Datasets.Add(new BarDataset()
        {
            Label = "Value",
            Data = BarDataExample.SimpleBar.Select(l => l.Value).ToList(),
            BackgroundColor = new List<string>() { "#ccff99", "#ff9999", "#ffcc80", 
                      "#a6a6a6" },
            BorderColor = new List<string>() { "#2eb82e", "#e60000", "#e68a00", 
                      "#404040" },
            BorderWidth = 1

        });
}
}

这里我手动提到了颜色，但是边框和背景颜色必须根据我在值中给出的范围进行更改。由于我是 C# 的初学者，我不知道如何解决这个问题。帮帮我吧。提前致谢。

Answer 1

1. 遍历

   BarDataExample.SimpleBar

   数组中的每个元素，并根据

   BackgroundColor

   为每个元素的

   BorderColor

   和

   dataItem.Value.Value

   值赋值。

2. 从

   BackgroundColor

   中选择

   BorderColor

   和

   BarDataExample.SimpleBar

   的值，并将它们分别分配给

   BackgroundColor

   和

   BorderColor

   的

   BarDataset

   实例的配置。

foreach (var dataItem in BarDataExample.SimpleBar)
{
    if (dataItem.Value.HasValue)
    {
        if (dataItem.Value.Value >= (decimal)0m
            && dataItem.Value.Value < (decimal)1.25m)
        {
            dataItem.BackgroundColor = "#008000";
            dataItem.BorderColor = "#008000";
        }
        else if (dataItem.Value.Value >= (decimal)1.25m
            && dataItem.Value.Value < (decimal)2.5m)
        {
            dataItem.BackgroundColor = "#FFA500";
            dataItem.BorderColor = "#FFA500";
        }
        else if (dataItem.Value.Value >= (decimal)2.5
            && dataItem.Value.Value < (decimal)3.75m)
        {
            dataItem.BackgroundColor = "#ff0000";
            dataItem.BorderColor = "#ff0000";
        }
        else if (dataItem.Value.Value >= (decimal)3.75m
            && dataItem.Value.Value < (decimal)5m)
        {
            dataItem.BackgroundColor = "#000000";
            dataItem.BorderColor = "#000000";
        }
        else
        {
            dataItem.BackgroundColor = "#D3D3D3";
            dataItem.BorderColor = "#D3D3D3";
        }
    }
}

_config1.Data.Datasets.Add(new BarDataset()
{
    Label = "Value",
    Data = BarDataExample.SimpleBar.Select(l => l.Value).ToList(),
    BackgroundColor = BarDataExample.SimpleBar.Select(l => l.BackgroundColor).ToList(),
    BorderColor = BarDataExample.SimpleBar.Select(l => l.BorderColor).ToList(),
    BorderWidth = 1
});

演示