33.26. <g:timeSeries>

TimeSeries构件功能与DataSeries构件相同,只是TimeSeries构件描绘的图表X轴是时间轴。此构件可用于绘制与时间有关的数据图表,例如商场的年度销售额统计图等。

同样的,TimeSeries构件需与TimeDataItem构件结合使用。

33.26.1. 构件信息

表 33.71. 构件信息

Component Typeorg.operamasks.faces.graph.TimeSeries
Component Familyjavax.faces.Data
Component Classorg.operamasks.faces.component.graph.UITimeSeries
Tag Classorg.operamasks.faces.webapp.graph.TimeSeriesTag

继承体系

+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.UITimeSeries

33.26.2. 属性

表 33.72. 属性

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)
是否必须 延时求值
需要显示的行的数目
timePeriod 定义类 org.operamasks.faces.component.graph.UITimeSeries
类型 javax.el.ValueExpression(org.operamasks.faces.component.graph.TimePeriodType)
是否必须 延时求值
指定显示每个数据之间的X轴标尺间隔
value 定义类 javax.faces.component.UIData
类型 java.lang.String
是否必须 延时求值
构件的当前值
var 定义类 javax.faces.component.UIData
类型 java.lang.String(java.lang.String)
是否必须 延时求值
代表每一行数据的变量

33.26.3. 构件API

33.26.3.1. TimePeriodType(枚举类型)

表 33.73. 枚举成员

名称 说明
Year
Quarter
Month
Week星期
Day
Hour小时
Minute分钟
Second
Millisecond毫秒

33.26.4. 示例

以下的例子介绍了g:timeSeries标签常用方法,在创建jsp页面之前,需要创建为数据表提供数据的托管Bean:

@ManagedBean(scope=ManagedBeanScope.SESSION)
public class TimeSeriesData extends ArrayList<TimeDataItem>
{
    public TimeSeriesData() {
        randomize();
    }

    public void randomize() {
        clear();

        GregorianCalendar cal = new GregorianCalendar(2006, 0, 1);
        double value = 100.0;
        for (int i = 0; i < 365; i++) {
            value = (value + Math.random()*10) - 5;
            add(new TimeDataItem(cal.getTime(), value));
            cal.add(Calendar.DATE, 1);
        }
    }
}

以下是jsp页面中关于TimeSeries的代码:

<g:lineChart title="Time Series Line Chart Demo" xAxisLabel="Time" yAxisLabel="Value" showLegend="true"> 
  <g:timeSeries value="#{TimeSeriesData}" var="ts"> 
    <g:timeDataItem legend="Random 1" time="#{ts.time}" value="#{ts.value}" /> 
  </g:timeSeries> 
</g:lineChart>