Blazor的Telerik UI?下载30天免费试用

雷达柱状图

Blazor雷达柱状图显示从公共中心开始并作为值轴的径向线上的数据点。数据点越靠近中心,其值越低。雷达柱状图为值创建三角形,而不是像常规柱状图那样创建矩形条。

雷达柱状图通常用于在依赖于大量定量因素的几个单位之间进行比较,比较的单位是单个系列,因素是类别。系列之间缺乏重叠,这使得比较单个值相对于总体覆盖率更容易。

本文假设您熟悉图基础而且数据绑定

创建雷达柱状图:

  1. 添加一个ChartSeriesChartSeriesItems集合
  2. 设置它类型财产ChartSeriesType。RadarColumn
  3. 为其提供数据集合数据财产
  4. 可选地,为x轴提供数据类别

比较两种食物的营养成分的雷达柱状图

@*雷达列系列*@                    @code { public List series1Data = new List() { 36, 30, 20 }; public List series2Data = new List() { 9, 20, 0.4d }; public string[] xAxisItems = new string[] { "Protein", "Carbohydrates", "Fats" }; }
         

雷达柱状图具体外观设置

颜色

一个系列的颜色是通过控制的颜色属性,可以采用任何有效的CSS颜色(例如,#六边形abcdef# f00,或蓝色的).

色域

柱状图可以采用系列项的颜色ColorField数据源的。您可以传递一个有效的CSS颜色(例如,#六边形abcdef# f00,或蓝色的).

间隙和间距

您可以控制将每个系列的数据点聚在一起的类别之间的距离。要做到这一点,请使用差距级数的性质。它是类别之间的距离,表示为条宽的百分比。

若要设置同一类别中不同系列的柱之间的距离,请使用间距财产。它是一个系列类别中系列项目之间的空间占单个系列项目宽度的比例。

要创建重叠,请设置负值。

的值差距而且间距对于第一个系列的整个图表,它们适用于所有类别和系列项目。

以上的解释处理的一般概念差距而且间距Telerik图表的特征。对于雷达类型的海图,计算略有不同,由于条形的径向性质,结果通常不太明显。

自定义图表元素-嵌套标签设置

在图表中配置嵌套属性和子元素时,内部标记将包含它们的父标记名称,并在其末尾添加细节。一般来说,这种嵌套标记的结构将是<图*级* * *细节>类别可以是以下其中之一:

  • CategoryAxis
  • ChartArea
  • 传说
  • PlotArea
  • SeriesItems
  • 标题
  • 工具提示
  • ValueAxis
  • XAxes
  • YAxes
  • 和其他人

要自定义图表,请寻找嵌套标记及其属性——内部标记将包含它们的父标记名称并在其末尾添加细节。例如,ChartSeries标签有一个ChartSeriesLabels标记,该标记公开配置选项和更多子标记。

的标签旋转就是一个例子分类图表。您可以使用

ChartCategoryAxes>ChartCategoryAxis>ChartCategoryAxisLabels>ChartCategoryAxisLabelsRotation标签

并设置属性转换为以度为单位的所需值(它们可能是负数或正数)。通过使用类似的方法,你可以控制ChartCategoryAxisLabelsMargin(添加上、下、左、右空白),ChartCategoryAxisLabelsPadding(为顶部,底部,左边和右边添加填充)和其他。

这种方法不仅限于标签——它可以用于适用于图表类型的所有标签,例如图表标题ChartTitle>ChartTitleMargin

另请参阅

在本文中
Baidu