如何基于数值范围设置Blazor Chartjs柱状图的颜色？

1. 编写颜色判断辅助方法 #

先写一个静态方法，根据数值返回对应颜色的十六进制码，可放在组件的代码块或模型类中：

public static string GetColorByValue(double value)
{
    if (value >= 0 && value <= 1.25)
        return "#2ecc71"; // 绿色
    else if (value > 1.25 && value <= 2.5)
        return "#f39c12"; // 橙色
    else if (value > 2.5 && value <= 3.75)
        return "#e74c3c"; // 红色
    else if (value > 3.75 && value <= 5)
        return "#2c3e50"; // 黑色
    else
        return "#95a5a6"; // 超出范围时用默认灰色
}

2. 处理数据并生成颜色数组 #

假设你的业务数据是List<YourModel>集合（每个模型包含Value和Label属性），在初始化图表时，同步生成背景色和边框色数组：

// 提取图表所需的标签、数值数据
var labels = yourDataList.Select(m => m.Label).ToList();
var chartData = yourDataList.Select(m => m.Value).ToList();

// 根据每个数值生成对应颜色数组
var backgroundColors = yourDataList.Select(m => GetColorByValue(m.Value)).ToList();
// 边框色可设置为同背景色加透明度（末尾加80表示80%不透明度），也可直接用背景色
var borderColors = yourDataList.Select(m => $"{GetColorByValue(m.Value)}80").ToList();

3. 绑定颜色到图表配置 #

在BarConfig的数据集配置中，将生成的颜色数组绑定到BackgroundColor和BorderColor属性：

<BarChart @ref="barChart" Config="@chartConfig" />

@code {
    private BarChart barChart;
    private BarConfig chartConfig;
    // 假设yourDataList是你的业务数据集合
    private List<YourModel> yourDataList = new List<YourModel>();

    protected override void OnInitialized()
    {
        // 这里替换成你的数据加载逻辑
        yourDataList = LoadYourData();

        var labels = yourDataList.Select(m => m.Label).ToList();
        var chartData = yourDataList.Select(m => m.Value).ToList();
        var backgroundColors = yourDataList.Select(m => GetColorByValue(m.Value)).ToList();
        var borderColors = yourDataList.Select(m => $"{GetColorByValue(m.Value)}80").ToList();

        chartConfig = new BarConfig
        {
            Options = new BarOptions
            {
                Responsive = true,
                MaintainAspectRatio = false
            },
            Data = new ChartData
            {
                Labels = labels,
                Datasets = new List<Dataset>
                {
                    new BarDataset
                    {
                        Label = "数值分布",
                        Data = chartData,
                        BackgroundColor = backgroundColors,
                        BorderColor = borderColors,
                        BorderWidth = 1
                    }
                }
            }
        };
    }

    // 颜色判断方法
    public static string GetColorByValue(double value)
    {
        if (value >= 0 && value <= 1.25)
            return "#2ecc71";
        else if (value > 1.25 && value <= 2.5)
            return "#f39c12";
        else if (value > 2.5 && value <= 3.75)
            return "#e74c3c";
        else if (value > 3.75 && value <= 5)
            return "#2c3e50";
        else
            return "#95a5a6";
    }

    // 模拟数据加载方法，替换成你的实际逻辑
    private List<YourModel> LoadYourData()
    {
        return new List<YourModel>
        {
            new YourModel { Label = "项目1", Value = 1.0 },
            new YourModel { Label = "项目2", Value = 2.0 },
            new YourModel { Label = "项目3", Value = 3.0 },
            new YourModel { Label = "项目4", Value = 4.5 }
        };
    }
}

// 你的模型类示例
public class YourModel
{
    public string Label { get; set; }
    public double Value { get; set; }
}

关键点说明 #

• 颜色值可以根据需求替换成任意十六进制颜色码或RGBA格式
• 边框色的透明度可按需调整，也可以直接使用和背景色完全相同的颜色
• 若数值可能超出0-5范围，else分支的默认颜色可根据业务调整

内容的提问来源于stack exchange，提问作者ani H