组件/图表/工具提示

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

Telerik Blazor图表的工具提示

Telerik Chart为其数据点提供了一个工具提示。您可以有特定于每一个的设置< ChartSeries >，所有系列的通用工具提示设置，或共享所有类别的工具提示。

在本文中:

基础知识

默认情况下，点的值将在鼠标悬停时显示。

为每个单独系列的数据点启用工具提示:

  1. 在< ChartSeries >，包括< ChartSeriesTooltip >标签。
  2. 设置它可见参数真正的．

为特定的图表系列启用工具提示

@*启用单个图表系列的工具提示*@             @code {public List data1 = new List() {1,2,3,4};public List data2 = new List() {2,3,4,5};public string[] xAxisItems = new string[] {"Q1"， "Q2"， "Q3"， "Q4"};｝
         
常见的工具提示

         
图表允许您一次性为所有系列启用和定义常用工具提示设置。它看起来像单独的工具提示(点的值将在鼠标悬停时显示)，但您只声明一次。

         
设置为特定的工具提示< ChartSeries >将优先于通用工具提示设置。

         
为所有系列启用相同的工具提示:

         
    
          
  1. 在< TelerikChart >，添加< ChartTooltip >．
    2. 
          
  2. 设置它可见参数真正的．
    3. 
         

         

          
同时为所有系列设置一个通用工具提示

         

         
@*本例向您展示如何为所有数据点创建一个公共工具提示*@                 @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"};｝
         
定制

         
你可以对工具提示进行两种类型的自定义:

         
    
          
  • 参数设置-让你改变外观设置，如边界，颜色和填充通过简单的参数
    • 
          
  • 模板-让你控制整个内容
    • 
         

         
参数设置

         
您可以使用以下命令自定义各个系列工具提示的外观:

         
    
          
  • 背景-通过应用CSS颜色字符串来控制背景颜色，包括HEX和RGB。默认情况下，它将与类别的颜色匹配。
    • 
          
  • 颜色-通过应用CSS颜色字符串来控制文本颜色，包括HEX和RGB。
    • 
          
  • 使用模板以控制在工具提示中呈现的内容。
    • 
         

         

          
使用应用自定义设置配置工具提示

         

         
@*本例显示如何自定义工具提示*@     < ChartSeriesTooltip Visible="true" Background="#0000FF" Color="#D3D3D3">              @code{公共类MyDataModel{公共int SecondSeriesValue {get;设置;}公共字符串ExtraData {get;设置;}} public List modelData = new List() {new MyDataModel() {SecondSeriesValue = 1, ExtraData = "first"}， new MyDataModel() {SecondSeriesValue = 5, ExtraData = "second"}， new MyDataModel() {SecondSeriesValue = 3, ExtraData = "third"}， new MyDataModel() {SecondSeriesValue = 2, ExtraData = "fourth"}，};public List simpleData = new List() {10,2,7,5};public string[] xAxisItems = new string[] {"Q1"， "Q2"， "Q3"， "Q4"}; }
         
常用工具提示设置

         
以类似的方式，你可以在公共工具提示部分声明这些设置:

         
    
          
  • 背景-通过应用CSS颜色字符串来控制背景颜色，包括HEX和RGB。默认情况下，它将与类别的颜色匹配。
    • 
          
  • 颜色-通过应用CSS颜色字符串来控制文本颜色，包括HEX和RGB。
    • 
          
  • 不透明度-控制工具提示的透明度。
    • 
          
  • 使用模板为了控制在工具提示中呈现的内容-它提供的标记名称和数据与特定的工具提示相同，但它会同时影响所有系列。
    • 
         

         
模板

         
的模板允许您控制工具提示的呈现，并向用户包含额外的信息。

         
在模板中你可以:

         
    
          
  • 使用业务逻辑并呈现HTML
    • 
          
  • 使用上下文参数，该参数提供有关当前数据点的信息。
    • 
         

         
中的可用序列数据点信息上下文是:

         
    
          
  • FormattedValue-映射到工具提示的默认呈现，格式为字符串。
    
           
      
            
    • 当图表数据被绑定时使用此选项独立串联绑定．您可以将其解析为数值(int，双等)，以便应用格式。否则，使用DataItem得到这个点的值。
      • 
           
    • 
          
  • DataItem-当前系列项的数据模型。您需要将其强制转换为来自数据源的类型，该类型需要是可序列化的。
    
           
      
            
    • 如果你正在使用时间轴,DataItem将在相应的y值字段中只包含聚合值，因为它是一个以上项的集合。看到类别详情如下。
      • 
           
    • 
          
  • 类别-提供关于数据点所在类别的信息。例如，您需要将其强制转换为数据源中的类型DateTime，字符串，int或者另一种类型。的类别参数适用于分类图．
    
           
      
            
    • 当使用时间轴，你可以把它和BaseUnit值，以筛选数据源并从数据源中获取实际数据项，以便提供关于这些数据项的额外信息。
      • 
           
    • 
          
  • 百分比-适用于甜甜圈，派而且堆叠100%图表-当前数据点从整体的百分比值。
    • 
          
  • SeriesIndex参数的索引< ChartSeries >数据点属于。
    • 
          
  • SeriesName-绑定到名字参数。< ChartSeries >数据点属于。
    • 
          
  • SeriesColor-显示数据点所属系列的RGB颜色。
    • 
          
  • CategoryIndex-显示数据点的x轴类别索引。
    • 
         

         

          
使用Tooltip模板并使用DataItem获取点的值并添加其他信息

         

         
这个例子展示了如何使用模板从模型中提供图标和其他信息*@      < chartseriestoltip Visible="true">               @code { public class MyDataModel { public int SecondSeriesValue { get; set; } public string ExtraData { get; set; } } public List modelData = new List() { new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, }; public List simpleData = new List() { 10, 2, 7, 5 }; public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; }
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

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

     

    
   
   

   
  
  
  
  
  
  
 
Baidu