组件/图表/类型

新《Blazor》的teleerik 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值标记处。
    • 
          
  • 插入-这条线将通过缺失数据点的插值值，并连接到下一个数据点的值。
    • 
          
  • 差距-的作用与零因为折线图的填充区域不能有空隙。
    • 
         

         
线条样式

         
你可以用不同的样式渲染点之间的线条。控件设置支持的样式风格子女的财产ChartSeriesLine标签，它取的是Telerik.Blazor.ChartSeriesLineStyle枚举:

         
    
          
  • 正常的-这是默认的样式。它在数据点之间产生一条直线。
    • 
          
  • 一步-样式通过垂直线和水平线呈现数据点之间的连接。它适用于表示该值在两次变化之间是恒定的。
    • 
          
  • 光滑的-这种样式使面积图通过数据点显示拟合曲线。当数据需要用曲线显示时，或者当您希望用平滑而不是直线连接点时，它适用。
    • 
         

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

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

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

         

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

         

         
这方面的一个例子是旋转a的标签分类图表。你可以使用

         
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