组件/图表/类型

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

面积图

的Blazor区域图将数据显示为连续的线，这些线穿过由其项的值定义的点。曲线下面的部分用每个系列的特定颜色填充。面积图中的颜色可以用来强调几组相似数据中值的变化。彩色背景可以清晰地显示这些差异。

面积图强调的是给定系列所包含的金钱、数据或任何其他单位的数量。当背景是半透明的，它可以让用户清楚地看到不同的数据集重叠的地方。

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

创建面积图:

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

显示产品收入的面积图表

@*区域系列*@               @code { public List series1Data = new List() { 10, 2, 7, 5 }; public List series2Data = new List() { 5, 12, 8, 2 }; public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; }
         
区域图特定外观设置

         
颜色

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

         
控件可以单独控制线条本身的颜色颜色嵌套属性TelerikChartSeriesLine标签。

         
不透明度

         
控件控制序列填充的透明程度不透明度财产。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, 2, 7, 5 }; public List series2Data = new List() { 5, 12, 8, 2 }; public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; }
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

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

     

    
   
   

   
  
  
  
  
  
  
 
Baidu