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

17 Mar 2025 | 5 分钟阅读

它是最重要的组件之一，用于定义需要在 VF 图表中呈现为阴影区域的数据系列。 <apex:areaSeries> 组件类似于 <apex:lineSeries> 组件，只是 fill 属性设置为 true。

<apex:areaSeries> 组件具有以下属性

1. axis

axis 属性的类型为 String，用于定义图表系列应绑定到的轴。可能的值为 left、right、top 和 bottom。

绑定的轴应由同级组件定义，即 <apex:axis> 组件。

语法

2. colorSet

类型为 String，用于定义颜色值的集合。我们将颜色指定为以逗号分隔的十六进制颜色。

语法

3. highlight

类型为 Boolean，用于指定当鼠标指针经过时是否应突出显示每个级别。默认情况下，其值设置为 true。

语法

4. hightlightLineWidth

类型为 Integer，用于指定突出显示级别时围绕该级别的线条的宽度（像素）。

语法

5. highlightOpacity

类型为 String，用于指定 0 到 1 之间的十进制数字。该十进制数字表示突出显示级别时颜色覆盖层的透明度。

语法

6. highlightStrokeColor

类型为 String，用于指定突出显示级别时围绕该级别的线条的颜色（十六进制代码）。

语法

7. id

id 属性的类型为 string，允许页面上的其他组件引用该图表组件。

语法

8. opacity

类型为 string，用于指定 0 到 1 之间的十进制数字。该十进制数字表示此系列级别的填充区域的透明度。

语法

9. rendered

类型为 Boolean，用于指定图表系列是否在图表中呈现。默认情况下，其值设置为 true。

语法

10. rendererFn

类型为 string，用于指定 JavaScript 函数的名称。指定的函数会覆盖每个数据点的呈现方式。

语法

11. showInLegend

类型为 Boolean，用于指定是否需要将此图表添加到图表图例中。默认情况下，其值设置为 true。

语法

12. tips

当鼠标指针经过时，我们需要为每个数据点标记显示工具提示时，我们使用此属性。此属性的类型为 Boolean，默认情况下，其值设置为 true。

语法

13. title

类型为 string，用于定义需要在图表图例中显示的此图表系列的标题。

语法

14. xField

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

语法

15. yField

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

语法

让我们举一个例子来了解如何在 VF 中使用 areaSeries 组件

ApexAreaSeriesExample.vfp

<!--Apex Page with standard and custom controller-->
<apex:page standardController="Campaign" extensions="ApexAreaSeriesController">
    <!-- use pageBlock, pageBlockSection, and pageBlockSectionItem to design chart in VF-->
    <apex:pageBlock >
        <!-- pageBlockSection that display the chart for Area-->
        <apex:pageBlockSection title="Area">
            <apex:pageBlockSectionItem >
                <!-- use apex:chart component with legend, axis, charLabel and areaSeries-->
                <apex:chart height="400" width="700" animate="true" legend="true" data="{!data}" name="Area Chart" theme="Category3">
                    <apex:legend position="right"/>
                    <apex:axis type="Numeric" position="right" fields="record1,record2,record3" title="Closed Won" grid="true">
                        <apex:chartLabel />
                    </apex:axis>
                    <apex:axis type="Category" position="bottom" fields="name" title="Month">
                        <apex:chartLabel rotate="300"/>
                    </apex:axis>
                    <apex:areaSeries axis="right" xField="name" yField="record1,record2,record3" tips="true" />
                </apex:chart>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
        <!-- pageBlockSection to display Pie chart-->
        <apex:pageBlockSection title="Pie Chart Example">
            <apex:pageBlockSectionItem>
                <!-- use apex:chart component with legend and pieSeries-->
                <apex:chart height="400" width="400" data="{!pieData}">
                    <apex:pieSeries dataField="record" labelField="name"/>
                    <apex:legend position="left"/>
                </apex:chart>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

ApexAreaSeriesController.apxc

// create class ApexAreaSeriesController for constructing chart data
public with sharing class ApexAreaSeriesController {
    // declare a campaign to access it on the VF page
    public Campaign campRec {get;set;}
    
    // default constructor with StandardController
    public ApexAreaSeriesController(ApexPages.StandardController std){
        campRec = (Campaign)std.getRecord();
    }
    
    // create getPieData() method 
    public List<PieChartDataWrapper> getPieData() {
        // create a list of PieChartDataWrapper
        List<PieChartDataWrapper> info = new List<PieChartDataWrapper>();
        
        // get the aggregate result of month and revenue
        List<AggregateResult> opps = [SELECT SUM(Amount) revenue, CALENDAR_MONTH(CloseDate) theMonth
                                      FROM Opportunity WHERE CampaignId =: campRec.id GROUP BY CALENDAR_MONTH(CloseDate)];
        
        // iterate aggregate result of opportunity
        for(AggregateResult agg : opps){
            Integer revenue = Integer.valueOf(agg.get('revenue'));// typecast outcome into Integer
            String month = String.valueOf(agg.get('theMonth')); // typecast outcome into String
            info.add(new PieChartDataWrapper(month, revenue));
        }
        return info;
    }
    
    // create getData() method 
    public List<DataWrapper> getData(){
        // create a list of DataWrapper
        List<DataWrapper> data = new List<DataWrapper>();
        
        // add data to the list
        data.add(new DataWrapper('January', 35, 85, 50));
        data.add(new DataWrapper('February, 39, 10, 60));
        data.add(new DataWrapper('March', 20, 27, 70));
        data.add(new DataWrapper('April', 69, 22, 80));
        data.add(new DataWrapper('May', 60, 46, 90));
        data.add(new DataWrapper('June', 28, 40, 94));
        data.add(new DataWrapper('July', 87, 77, 25));
        data.add(new DataWrapper('August', 82, 68, 40));
        data.add(new DataWrapper('September', 29, 60, 50));
        data.add(new DataWrapper('October', 73, 61, 51));
        data.add(new DataWrapper('November', 75, 62, 48));
        data.add(new DataWrapper('December', 12, 65, 65));
        
        return data;
    }
    
    // create DataWrapper class to form data
    public class DataWrapper {
        public String name { get; set; }
        public Integer record1 { get; set; }
        public Integer record2 { get; set; }
        public Integer record3 { get; set; }
        
        // parameterized constructor
        public DataWrapper(String name, Integer record1, Integer record2, Integer record3) {
            this.name = name;
            this.record1 = record1;
            this.record2 = record2;
            this.record3 = record3;
        }
    }
    
    // create PieChartDataWrapper to form data for Pie chart
    public class PieChartDataWrapper {
        public String name { get; set; }
        public Integer record { get; set; }
        
        // parameterized constructor
        public PieChartDataWrapper(String name, Integer record) {
            this.name = name;
            this.record = record;
        }
    }
}

输出

apex:areaSeries Component in Visualforce Page

下一个主题Visualforce 页面中的组件

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

1. axis

2. colorSet

3. highlight

4. hightlightLineWidth

5. highlightOpacity

6. highlightStrokeColor

7. id

8. opacity

9. rendered

10. rendererFn

11. showInLegend

12. tips

13. title

14. xField

15. yField

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Visualforce Salesforce

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

1. axis

2. colorSet

3. highlight

4. hightlightLineWidth

5. highlightOpacity

6. highlightStrokeColor

7. id

8. opacity

9. rendered

10. rendererFn

11. showInLegend

12. tips

13. title

14. xField

15. yField

相关帖子

apex:dynamicComponent

apex:commandLink 组件

apex:lineSeries 组件

apex:pageBlockTable 组件

apex:message 组件

apex:form 组件

apex:map 组件

apex:dataList 组件

apex:commandButton 组件

apex:actionFunction 组件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器