组件/图表/类型

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

列图表

的Blazor柱状图将数据显示为垂直条，其高度根据其值而变化。您可以使用柱状图来显示几组数据之间的比较(例如，不同时间段的销售数据摘要)。每个系列自动着色不同，更容易阅读。

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

格式占位符

的FormatPlaceholderparameter允许您设置自定义字符串作为每个DateTime段的占位符，并可用于以下Telerik UI的Blazor组件:

  • DateInput
  • DatePicker
  • DateTimePicker
  • DateRangePicker
  • TimePicker

要设置FormatPlaceholder，使用< *组件* FormatPlaceholder >嵌套的标签。它允许您使用以下参数设置格式占位符:

  • 一天
  • 月
  • 一年
  • 小时
  • 一分钟
  • 第二个
  • 工作日

缺省情况下，所有参数的值为零，它应用完整格式说明符。

创建柱状图:

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

显示产品收入的柱状图

Column series               @code { public List series1Data = new List() { 10, 2, 5, 6 }; public List series2Data = new List() { 5, 8, 2, 7 }; public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; }
         
柱状图特定外观设置

         
标签

         
每个数据项都用文本标签装饰。控件可以控制和自定义它们< ChartCategoryAxisLabels / >和它的子标签。

         
    
          
  • 可见—隐藏所有标签，设置为假．
    • 
          
  • 一步-呈现每n个标签，其中n是传递给参数的值(双位数)。
    • 
          
  • 跳过-跳过前n个标签，其中n是传递给参数的值(双位数)。
    • 
          
  • 角-将标签以所需的角度旋转n度，其中n是传递给参数的值。它可以取正数和负数。要设置此参数，请使用< ChartCategoryAxisLabelsRotation />子标签。
    • 
         

         
要旋转标记，请使用ChartCategoryAxisLabelsRotation子标签，并设置其角参数。它可以取正数和负数作为值。

         
颜色

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

         
色域

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

         
每个系列项目的颜色       @code{公共类MyChartDataModel{公共字符串类别{get;设置;} public double ItemValue {get;设置;}公共字符串颜色{获取;设置;}} public List theData = new List {new MyChartDataModel {Category = "Product 1"， ItemValue = 2, Color = "red"}， new MyChartDataModel {Category = "Product 2"， ItemValue = 3, Color = "#00ff00"}}， new MyChartDataModel {Category = "Product 3"， ItemValue = 4, Color = "#00f"}}; }

         
间隙和间距

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

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

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

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

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

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

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

         

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

         

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

         
ChartCategoryAxes>ChartCategoryAxis>ChartCategoryAxisLabels>ChartCategoryAxisLabelsRotation标签

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

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

         

          
配置标签旋转，跳过渲染每一秒标签和添加边界和填充标签。

         

         
@*跳过渲染每秒钟标签和自定义他们有边框，填充和旋转。*@           @* With this you set the rendering step, in this case it will skip the rendering of every second label *@           @code { public List series1Data = new List() { 10, 2, 5, 6, 8, 8, 13, 11, 4, 9, 10, 15, 14, 3, 2 }; public List series2Data = new List() { 5, 8, 2, 7, 6, 11, 14, 13, 8, 7, 2, 7, 5, 9, 11 }; public string[] xAxisItems = new string[15]; protected override void OnInitialized() { for (int i = 0; i < 15; i++) { xAxisItems[i] = $"looooong label {i + 1}"; } base.OnInitialized(); } }
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

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

     

    
   
   

   
  
  
  
  
  
  
 
Baidu