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

17 Mar 2025 | 5 分钟阅读

<apex: barSeries> 是另一个重要的组件，它充当数据系列，在 Visualforce 图表中呈现为条形。我们必须指定数据集合字段以用作每个点的 X 和 Y 值，以及用于缩放的 X 和 Y 轴。

我们必须在 <apex: chart> 组件中使用此组件，并且在 <apex: chart> 组件内，我们可以使用多个 <apex: barSeries> 组件。

<apex: barSeries> 在 Visualforce 页面上具有以下属性

1. axis

axis 是一个字符串类型属性，用于指定此图表系列应绑定的轴。此属性的值可以是以下之一

top
bottom (底部)
左
右

语法

2. colorSet

colorSet 是一个字符串类型属性，用于指定一组用作条形填充颜色的颜色值。此属性的值指定为逗号分隔的 HTML 样式颜色字符串。

语法

3. colorsProgressWithinSeries

colorProgressWithinSeries 是一个布尔类型属性，用于指定如何遍历 colorSet 属性的值。

语法

4. groupGutter

groupGutter 是一个整数类型属性，用于指定条形组之间的间距，以条形宽度的百分比表示。

语法

4. gutter

gutter 是一个整数类型属性，用于指定单个条形之间的间距，以条形宽度的百分比表示。

语法

6. highlight

highlight 是一个布尔类型属性，用于指定当鼠标悬停在每个条形上时是否应突出显示它。此属性的默认值设置为布尔值 true。

语法

7. highlightColor

highlightColor 是一个字符串类型属性，用于指定突出显示条形时覆盖在其上的 HTML 样式颜色。

语法

8. highlightLineWidth

highlightLineWidth 是一个整数类型属性，用于指定突出显示条形时环绕条形的线条的宽度（以像素为单位）。

语法

9. highlightOpacity

highlightOpacity 是一个字符串类型属性，用于指定介于 0 和 1 之间的十进制数，表示突出显示条形时颜色覆盖的不透明度。

语法

10. highlightStroke

highlightStroke 是一个字符串类型属性，用于指定突出显示条形时环绕条形的线条的 HTML 样式颜色。

语法

11. id

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

语法

12. orientation

orientation 是一个字符串类型属性，用于指定图表中条形的方向。 horizontal 和 vertical 是此属性的两个可能值。

语法

13. rendered

rendered 是一个布尔类型属性，用于指定是否在图表中呈现图表系列。此属性的默认值设置为布尔值 true。

语法

14. renderedFn

renderedFn 是一个字符串类型属性，用于指定 JavaScript 函数的名称，该函数会扩充或覆盖每个数据点的呈现方式。实施 JavaScript 方法以提供额外的样式或扩充数据。

语法

15. showInLegend

showInLegend 是一个布尔类型属性，用于指定是否应将图表系列添加到图表图例中。此属性的默认值设置为布尔值 true。

语法

16. stacked

stacked 是一个布尔类型属性，用于指定是否对条形值进行分组或堆叠。

语法

17. tips

"tips" 是一个布尔类型属性，用于指定当鼠标悬停在每个条形上时是否需要显示工具提示。此属性的默认值设置为布尔值 true。

语法

18. title

title 是一个字符串类型属性，用于指定此图表系列在图表图例中显示的标题。

语法

19. xField

在图表数据中提供的每个记录中的字段，从中检索系列中每个数据点的 x 轴值。此字段必须存在于图表数据中的每个记录中。

语法

20. yField

在每个记录中提供该字段，该字段提供在图表数据中，用于检索系列中每个数据点的 y 轴值。此字段必须存在于图表数据中的每个记录中。

语法

21. xPadding

xPadding 是一个整数类型属性，用于指定左右轴与图表的条形之间的填充（以像素为单位）。

语法

22. yPadding

yPadding 是一个整数类型属性，用于指定顶部和底部轴与图表的条形之间的填充（以像素为单位）。

语法

让我们看一个例子来了解如何在 Visualforce 页面上使用 <apex: barSeries> 组件。

ApexBarSeriesExample.vfp

<!-- apex page to represent the use of apex: barSeries component -->
<apex:page controller="ApexBarSeriesController" 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:axis type="Category" position="bottom" fields="attribute" title="LimitAttribute"/>
        <apex:barSeries orientation="vertical" axis="left" xField="attribute" yField="apiRequestLimit"/>
    </apex: chart>
</apex: page> 

ApexBarSeriesController.apxc

//create class ApexBarSeriesController to construct data for the chart
public class ApexBarSeriesController {
    //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 ;
        }
    }    
}

输出