Visualforce 页面中的 <apex: chartTips> 组件

2025年3月17日 | 阅读 3 分钟

<apex: chartTips> 是另一个重要的组件，用于定义鼠标悬停在数据序列元素上时显示的工具提示。数据序列组件的 "tips" 属性也用于显示工具提示。<apex: chartTips> 组件提供更多配置选项来显示工具提示。<apex: chartTips> 组件始终用作数据序列组件的子组件。

<apex: chartTips> 组件在 Visualforce 页面上具有以下属性：

1. height（高度）

height（高度） 是一个整数类型属性，用于指定工具提示的高度，以像素为单位。

语法

2. id

id 是字符串类型的属性，即唯一的标识符，允许页面上的其他组件引用此组件。

语法

3. labelField

labelField 是一个字符串类型属性，用于指定从哪个字段检索序列中数据点的标签，并将其用作工具提示的标签。"labelField" 是饼图和仪表盘序列的默认值。

语法

4. rendered

rendered 是一个布尔类型属性，用于指定数据序列工具提示是否随图表一起呈现。布尔值 true 被设置为此属性的默认值。

语法

5. rendererFn

rendererFn 是一个字符串类型属性，用于指定 JavaScript 函数的名称，该函数增强或覆盖图表提示的工具提示呈现。

语法

6. trackMouse

trackMouse 是一个布尔类型属性，用于指定图表提示是否应跟随鼠标指针。布尔值 true 被设置为此属性的默认值。

语法

7. valueField

valueField 是一个字符串类型属性，用于指定每个图表数据记录中的字段名称，以用作序列中每个数据点的工具提示的值。dataField 用作饼图和仪表盘序列的默认值。

语法

8. width

width（宽度） 是一个整数类型属性，用于指定工具提示的宽度，以像素为单位。

语法

让我们看一个例子来了解如何在 Visualforce 页面上使用此组件

ApexChartTipsExample.vfp

<!-- apex page to represent the use of apex: chartTips component -->
<apex:page controller="ApexChartTipsController" title="Bar Chart">
    <!-- create a chart using <apex: chart> component-->
    <apex:chart data="{!OrgInformation}" height="500" width="600">
        <apex:legend position="top"/>
        <!-- use <apex: axis> component to specify axis for left and bottom position-->
        <apex:axis type="Numeric" position="left" fields="apiRequestLimit" title="Limit" >
            <apex:chartLabel rotate="315"/>
        </apex: axis>
        <apex:axis type="Category" position="bottom" fields="attribute" title="LimitAttribute">
            <apex:chartLabel rotate="315"/>
        </apex: axis>
        <apex:barSeries orientation="vertical" axis="left" xField="attribute" yField="apiRequestLimit">
            <apex: chartTips height="20" width="120"/>
        </apex:barSeries>
    </apex: chart>
</apex: page>

ApexChartTipsController.apex

//create class ApexChartTipsController to construct data for the chart
public class ApexChartTipsController {
    //create
    public List<ChartInfo> getOrgInformation() {
        
        // create a list of ChartInfo
        List<ChartInfo> records = new List<ChartInfo>();
        
        // create a map that stores org information
        Map<String,System.OrgLimit> limitsMap = OrgLimits.getMap();
        
        if(limitsMap.containsKey('DailyApiRequests')){
            System.OrgLimit apiRequestsLimit = limitsMap.get('DailyApiRequests');
            
            Integer value1 = apiRequestsLimit.getValue();
            Integer value2 = apiRequestsLimit.getLimit();
            
            records.add(new ChartInfo('Max/Remaining', value2));
            records.add(new ChartInfo('Remaining', value2-value1));
            records.add(new ChartInfo('Used', value1));
            return records;
        }
        return null;
    }
    // create wrapper class for chart
    public class ChartInfo {
        public String attribute {get;set;}
        public Integer apiRequestLimit {get;set;}        
        
        // constructor
        public ChartInfo(String attribute, Integer requestLimit) {
            this.attribute = attribute ;
            this.apiRequestLimit = requestLimit ;
        }
    }    
}

输出