个性化阅读
专注于IT技术分析

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;
@ManagedBean
public class Area implements Serializable {
private LineChartModel drawArea;
@PostConstruct
public 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);
}
}

输出

PrimeFaces AreaChart 1
赞(0)
未经允许不得转载:srcmini » PrimeFace AreaChart组件用法

评论 抢沙发

评论前必须登录!