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

17 Mar 2025 | 5 分钟阅读

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

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

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

1. axis

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

top
bottom (底部)
左
右

语法

2. fill

fill 是一个布尔类型属性，用于指定是否应填充下划线区域。布尔值 false 设置为此属性的默认值。

此属性。

语法

3. fillColor

fillColor 是一个字符串类型属性，用于指定颜色，即用于填充下划线颜色区域。

语法

4. highlight

highlight 是一个布尔类型属性，用于指定当发生 onmouseover 事件时是否应突出显示折线系列中的每个点。布尔值 true 设置为此属性的默认值。

语法

5. highlightStrokeWidth

highlightStrokeWidth 是一个字符串类型属性，用于指定突出显示系列线时绘制在系列线上的线的宽度。

语法

6. id

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

语法

7. markerFill

markerFill 是一个字符串类型属性，用于指定此系列的数据点标记的颜色。此属性的值指定为 HTML 样式颜色。

语法

8. markerSize

markerSize 是一个整数类型属性，用于指定此系列的每个数据点标记的大小。默认情况下，其值设置为 3。

语法

9. markerType

markerType 是一个字符串类型属性，用于指定此系列的每个数据点标记的形状。这些是此属性的可能值

circle
cross

默认情况下，标记形状是从形状序列中选择的。

语法

10. opacity

opacity 是一个字符串类型属性，用于指定 0 到 1 之间的十进制数，指示系列线条下方填充区域的不透明度。默认情况下，仅当 fill 属性设置为 true 时，其值才设置为 0.3。

语法

11. rendered

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

语法

12. renderedFn

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

语法

13. showInLegend

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

语法

14. smooth

smooth 是一个整数类型属性，用于指定线的平滑量，较低的数字应用更多的平滑。

语法

15. strokeColor

strokeColor 是一个字符串类型属性，用于指定此系列的线条颜色。

语法

16. tips

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

语法

17. title

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

语法

18. strokeWidth

strokeWidth 是一个整数类型属性，用于指定系列的线条宽度。

语法

19. xField

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

语法

20. yField

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

语法

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

ApexLineSeriesExample.vfp

<!-- apex page to demonstrate the working of apex lineSeries-->
<apex:page controller="LineSeriesController" showHeader="false" readOnly="true">
    <!-- apex chart with three axis, barSeries, and lineSeries-->
    <apex:chart width="600" height="300" data="{!data}">
        <!-- axis for Closed Opportunities-->
        <apex:axis type="Numeric" position="left" fields="closedWonOpp" title="Closed Won Opportunities" grid="true"/>
        <apex:axis type="Numeric" position="right" fields="totalRevenue" title="Opportunity Revenue"/>
        <apex:axis type="Category" position="bottom" fields="theMonth" title="2022"/>
        
        <!-- use barSeries to show Monthly Sales -->
        <apex:barSeries title="Monthly Sales" orientation="vertical" axis="right" colorsProgressWithinSeries="true"
                        xField="theMonth" yField="totalRevenue" colorSet="#F8B195,#F67280,#C06C84,#6C5B7B"/>
        
        <!-- use apex lineSeries to show  Closed Won Opportunities with revenue-->
        <apex:lineSeries title="Closed-Won" axis="left" xField="theMonth" yField="closedWonOpp"
                         markerType="cross" markerSize="5" markerFill="#000000"/>
    </apex: chart>
</apex: page>

LineSeriesController.apxc

// create class LineSeriesController to design data for lineSeries
public without sharing class LineSeriesController {
    public List<AggregateResult> getData() {
        List<AggregateResult> returnData = new List<AggregateResult>();
        
        // get closed won opportunity data
        returnData = [SELECT SUM(Amount) totalRevenue, COUNT(Name) closedWonOpp, CALENDAR_MONTH(CloseDate) theMonth 
                      FROM Opportunity WHERE stageName = 'Closed Won' AND CALENDAR_YEAR(CloseDate) = 2022 GROUP BY 
                      CALENDAR_MONTH(CloseDate) ORDER BY CALENDAR_MONTH(CloseDate)];
        
        //return data to the VF page
        return returnData;
    }
}

输出