尽管使用各种DataSeries构件所提供的方法可以胜任许多任务，但是这些构件不可以简单的绘制出类似于数学上的三角函数图或物理学上的波形图，因为这些图形的数据需要通过函数生成。显然，如果DataSeries构件绑定这些数据，用户需要在后端写许多代码，而且通用性差。
FunctonSeries构件的功能在于包含的FunctoinItem，而FunctionItem可以自动的调用后端算术表达式，绘制用户定义的图形。
表 33.36. 构件信息
| Component Type | org.operamasks.faces.graph.FunctionSeries |
| Component Family | javax.faces.Data |
| Component Class | org.operamasks.faces.component.graph.UIFunctionSeries |
| Tag Class | org.operamasks.faces.webapp.graph.FunctionSeriesTag |
+java.lang.Object
++javax.faces.component.UIComponent
+++javax.faces.component.UIComponentBase
++++javax.faces.component.UIData
+++++org.operamasks.faces.component.graph.UIDataSeries
++++++org.operamasks.faces.component.graph.UIFunctionSeries
表 33.37. 属性
| binding | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | javax.el.ValueExpression(javax.faces.component.UIComponent) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 一个值表达式，用于把该组件链接到一个ManagedBean的某个属性。 | ||||
| first | 定义类 | javax.faces.component.UIData | ||
| 类型 | javax.el.ValueExpression(int) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 指定显示的数据从哪一行开始 | ||||
| id | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | java.lang.String | |||
| 是否必须 | 否 | 延时求值 | 否 | |
| 这个组件的组件标识符。这个值在最近的命名容器类型的父组件范围内，必须是唯一的。 | ||||
| rendered | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | boolean(boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 一个标志，指出该组件是否要在任何随后的form提交过程中被渲染或处理。 这个属性的缺省值是true。 | ||||
| rows | 定义类 | javax.faces.component.UIData | ||
| 类型 | javax.el.ValueExpression(int) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 需要显示的行的数目 | ||||
| value | 定义类 | javax.faces.component.UIData | ||
| 类型 | java.lang.String | |||
| 是否必须 | 否 | 延时求值 | 否 | |
| 构件的当前值 | ||||
| var | 定义类 | javax.faces.component.UIData | ||
| 类型 | java.lang.String(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 代表每一行数据的变量 | ||||
以下的例子介绍了g:functionSeries标签常用方法，在创建jsp页面之前，需要编写用户自定义的算术表达式。在这个java例子中定义了一个tan函数：
@ManagedBean(scope=ManagedBeanScope.REQUEST)
public class GraphData {
public double tan(double x) {
return Math.tan(x);
}
}以下是g:functionSeries标签的代码，FunctionSeries需FunctionItem结合使用：
<g:lineChart>
<g:yAxis lowerBound="-10" upperBound="10"/>
<g:functionSeries>
<g:functionItem legend="y = tan(x)" start="-10" end="10" step="0.1" expression="#{GraphData.tan}"/>
</g:functionSeries>
</g:lineChart>