PrimeFace AreaChart组件用法 _PrimeFaces组件

本文概述

图表属性
例子

【PrimeFace AreaChart组件用法】它是线形图的定制和高级版本, 其中填充了系列。它用于以图形方式表示统计数据。 < p：chart> 是在JSF应用程序中创建图表的通用组件。我们可以设置图表类型以指定pf图表的类型。
图表具有下表列出的各种属性。这些属性是通用属性, 适用于所有类型的图表。
图表属性

Attribute	Default value	Type	Description
id	null	String	它是组件的唯一标识符。
rendered	true	Boolean	它需要布尔值来指定组件的呈现。
type	null	String	用于指定图表的类型。
model	null	ChartModel	用于设置数据和设置的模型对象。
style	null	String	用于设置组件的内联样式。
widgetVar	null	String	它是客户端小部件的名称。
responsive	false	Boolean	在响应模式下, 调整窗口大小时将重新绘制图表。

例子在下面的示例中, 我们正在实现< p：chart> 组件。本示例包含以下文件。
JSF文件
// area.xhtml

< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"> < h:head> < title> Area< /title> < /h:head> < h:body> < p:chart type="line" model="#{area.drawArea}" style="height:300px" /> < /h:body> < /html>

ManagedBean
// Area.java

package com.srcmini; import javax.annotation.PostConstruct; import java.io.Serializable; import javax.faces.bean.ManagedBean; import org.primefaces.model.chart.Axis; import org.primefaces.model.chart.AxisType; import org.primefaces.model.chart.CategoryAxis; import org.primefaces.model.chart.LineChartModel; import org.primefaces.model.chart.LineChartSeries; @ManagedBeanpublic class Area implements Serializable {private LineChartModel drawArea; @PostConstructpublic void init() {createDrawArea(); }public LineChartModel getDrawArea() {return drawArea; }private void createDrawArea() {drawArea = new LineChartModel(); LineChartSeries boys = new LineChartSeries(); boys.setFill(true); boys.setLabel("Boys"); boys.set("2010", 140); boys.set("2011", 120); boys.set("2012", 64); boys.set("2013", 170); boys.set("2014", 45); LineChartSeries girls = new LineChartSeries(); girls.setFill(true); girls.setLabel("Girls"); girls.set("2010", 72); girls.set("2011", 80); girls.set("2012", 130); girls.set("2013", 110); girls.set("2014", 140); drawArea.addSeries(boys); drawArea.addSeries(girls); drawArea.setTitle("Area Chart"); drawArea.setLegendPosition("ne"); drawArea.setStacked(true); drawArea.setShowPointLabels(true); Axis xAxis = new CategoryAxis("Years"); drawArea.getAxes().put(AxisType.X, xAxis); Axis yAxis = drawArea.getAxis(AxisType.Y); yAxis.setLabel("Births"); yAxis.setMin(0); yAxis.setMax(300); }}

输出