条形图
的Blazor柱状图将数据显示为水平条，其长度根据其值而变化。您可以使用柱状图来显示几组数据之间的比较(例如，不同时间段的销售数据摘要)。为了便于阅读，每个系列自动着色不同。
使用实例创建柱状图。
- 添加一个
ChartSeries到ChartSeriesItems集合 - 设置它
类型财产ChartSeriesType。酒吧 - 提供一个数据集合
数据财产 - 可选地，为x轴提供数据
类别
显示产品收入的柱状图
Bar series @code { public List条形图特定的外观设置
颜色
一个系列的颜色是通过颜色属性可以接受任何有效的CSS颜色(例如，#六边形abcdef，# f00,或蓝色的)．颜色控制区域的填充颜色。
色域
柱状图和柱状图可以采用系列项目的颜色ColorField数据源的。你可以传递一个有效的CSS颜色(例如，#六边形abcdef，# f00,或蓝色的)．
每个系列项目的颜色 @code{公共类MyChartDataModel{公共字符串类别{get;设置;}公共双ItemValue {get;设置;}公共字符串颜色{get;设置;}} public List theData = new List {new MyChartDataModel {Category = "Product 1"， ItemValue = 2, Color = "red"}， new MyChartDataModel {Category = "Product 2"， ItemValue = 3, Color = "#00ff00"}， new MyChartDataModel {Category = "Product 3"， ItemValue = 4, Color = "#00f"}}; } 间隙和间距
您可以控制将每个系列的数据点聚集在一起的类别之间的距离。要做到这一点，请使用差距级数的性质。它是类别之间的距离，用栏宽的百分比表示。
若要设置同一类别中不同系列的条之间的距离，请使用间距财产。它是一个系列类别中系列项目之间的空间与单个系列项目宽度的比例。
要创建重叠，请设置负值。
的值可以配置差距而且间距对于第一个系列的整个图表，它们适用于所有类别和系列项目。
自定义图表元素-嵌套标签设置
在配置图表中的嵌套属性和子元素时，内部标记将包含它们的父标记名，并在其末尾添加细节。一般来说，这种嵌套标记的结构将是<图*级* * *细节>类别可以是下列其中之一:
- CategoryAxis
- ChartArea
- 传说
- PlotArea
- SeriesItems
- 标题
- 工具提示
- ValueAxis
- XAxes
- YAxes
- 和其他人
要自定义图表，请查找嵌套标记及其属性—内部标记将包含其父标记名并在其末尾添加详细信息。例如，
ChartSeries标签有一个ChartSeriesLabels标记，该标记公开配置选项和更多子标记。
一个例子是a的标签的旋转分类图表。您可以使用
ChartCategoryAxes>ChartCategoryAxis>ChartCategoryAxisLabels>ChartCategoryAxisLabelsRotation标签
并设置角属性设置为所需的度数(它们可能是负数或正数)。通过使用类似的方法，你可以控制ChartCategoryAxisLabelsMargin(添加上、下、左、右空白)，ChartCategoryAxisLabelsPadding(为顶部、底部、左侧和右侧添加填充)和其他内容。
这种方法不仅限于标签——它可以用于适用于图表类型的所有标签，例如图表标题ChartTitle>ChartTitleMargin．
配置值轴标签模板，更改类别轴字体。
@*添加类别和值坐标的配置设置*@ @code { public class ModelData { public int Value { get; set; } } public List Data = new List() { new ModelData() { Value = 1 }, new ModelData() { Value = 3 }, new ModelData() { Value = 2 }, }; public List