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

雷达折线图

Blazor雷达折线图显示从公共中心开始并作为值轴的径向线上的数据点。数据点越靠近中心,其值越低。雷达折线图将数据点的值用线连接起来。

雷达折线图通常用于在依赖于大量定量因素的几个单位之间进行比较,比较的单位是单个系列,因素是类别。由于系列之间没有重叠,除了总体覆盖范围之外,还可以更容易地比较单个值。

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

创建雷达折线图:

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

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

@*雷达线系列*@                      @code {public List series1Data = new List() {-8, - 6,0,6,13,18,22,18,13,5,0, -4};public List series2Data = new List() {-16, -14, -10, -3, 3,8,12,9,5, -1, -6, -11};public string[] xAxisItems = new string[] {"January", "February", "March", "April", "June", "July", "August", "September", "October", "November", "December"};}
         

雷达线形图具体外观设置

颜色

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

可以使用嵌套的Background属性来控制标记的颜色ChartSeriesMarkers标签。

ColorField

你可以通过ColorField将图表作为模型的一部分,并且数据点(标记)将使用该颜色而不是颜色这个系列的背景的标记设置。

缺失值

如果系列数据中缺少某些值(它们缺少),您可以通过设置MissingValues类的成员Telerik.Blazor.ChartSeriesMissingValuesenum):

  • -默认行为。直线走向0值标记。
  • 插入-该线将通过缺失数据点的插值值,并连接到下一个具有值的数据点。
  • 差距-将不会有遗漏值的类别的行。

线条样式

你可以用不同的风格渲染点之间的线条。控件可以设置所支持的样式风格属性的成员Telerik.Blazor.ChartSeriesStyle枚举:

  • 正常的-这是默认样式。它在数据点之间产生一条直线。
  • 一步行为方式与正常的浏览雷达折线图。
  • 光滑的-此样式使图表通过数据点显示拟合曲线。当数据需要用曲线显示时,或者当您希望用平滑而不是直线连接点时,它适用。

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

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

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

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

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

ChartCategoryAxes>ChartCategoryAxis>ChartCategoryAxisLabels>ChartCategoryAxisLabelsRotation标签

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

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

另请参阅

在本文中
Baidu