组件/图表/类型

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

雷达面积图

的Blazor雷达区域图显示从公共中心开始并作为值轴的径向线上的数据点。数据点越靠近中心，其值越低。雷达面积图将每个类别上的数据点用线连接起来，并将封闭空间填充到中心，以提供整个封闭体积的可视化表示。

雷达面积图通常用于在几个单位之间进行比较，这些单位取决于许多定量因素，比较的单位是单个系列，因素是类别。当背景是半透明的，它可以让用户清楚地看到不同的数据集重叠的地方。

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

创建雷达面积图:

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

雷达区域图，显示性格评价之间的比较

@*雷达区域系列*@               @code { public List series1Data = new List() { 10, 3, 3, 10, 2, 10 }; public List series2Data = new List() { 4, 10, 10, 5, 5, 4 }; public string[] xAxisItems = new string[] { "Experience", "Communication", "Friendliness", "Subject Knowledge", "Presentation", "Education" }; }
         
雷达区域图特定外观设置

         
颜色

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

         
控件可以单独控制线条本身的颜色颜色嵌套属性TelerikChartSeriesLine标签。要查看该行，请设置其宽度参数设置为大于的值0．

         
不透明度

         
控件控制序列填充的透明程度不透明度财产。0表示一个完全透明的级数，并且1意思是完全不透明(非透明)的填充。您可以使用十进制值来设置所需的透明度(例如，不透明度= " 0.3 ")．

         
缺失值

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

         
    
          
  • 零-默认行为。直线走向0值标记。
    • 
          
  • 插入-该线将通过缺失数据点的插值值，并连接到下一个具有值的数据点。
    • 
          
  • 差距-在线中留下一个间隙，这样你可能会得到两个项目被缺失值包围的不连接的线部分，以及图表将尽可能连接相邻点的其他颜色“岛屿”。
    • 
         

         
线条样式

         
你可以用不同的风格渲染点之间的线条。控件可以设置所支持的样式风格孩子的财产ChartSeriesLineTag -它需要一个元素Telerik.Blazor.ChartSeriesLineStyle枚举:

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

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

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

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

         

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

         

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

         
ChartCategoryAxes>ChartCategoryAxis>ChartCategoryAxisLabels>ChartCategoryAxisLabelsRotation标签

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

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

         

          
更改第一个系列的行设置，类别轴标签的颜色和字体以及图例边框

         

         
@*更改系列的行，类别标签和图例边框*@                    @code { public List series1Data = new List() { 10, 8, null, 10, 2, 10 }; public List series2Data = new List() { 4, 10, 10, 5, 5, 4 }; public string[] xAxisItems = new string[] { "Experience", "Communication", "Friendliness", "Subject Knowledge", "Presentation", "Education" }; }
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进这篇文章
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu