如何根据数值范围更改图表中条形图的颜色?
示例:我正在使用BlazorWebAssemblyApp项目和图表包-*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#的初学者,我不知道如何拉这个。一定要帮帮我。先谢谢你了。
1条答案
按热度按时间14ifxucb1#
1.迭代
BarDataExample.SimpleBar
数组中的每个元素,并根据dataItem.Value.Value
分配每个元素的BackgroundColor
和BorderColor
值。1.从
BarDataExample.SimpleBar
中选择BackgroundColor
和BorderColor
的值,并将其分别分配给BarDataset
示例的BackgroundColor
和BorderColor
的配置。演示