ChartistJSF是一个面向Java服务器面(JSF)应用程序的响应和简单的图表库。ChartistJSF基于Chartist.js,这是一个轻量级且响应迅速的基于JavaScript的图表库。为了与Java服务器页面应用程序兼容,ChartistJSF建立在PrimeFaces之上。
与其他图表库相比,ChartistJSF提供了几个好处。在ChartistJSF中,风格和功能是分开的,所以维护图表有很大的灵活性。关于ChartistJSF的另一个注意事项是使用SVG而不是基于画布的图形。SVG图形更加轻量级,具有良好的表现质量,并且由于它们基于XML的结构,它们的元素可以很容易地使用JavaScript和CSS进行操作。此外,通过使用@media
CSS的查询(由于风格和功能的分离),图表更具响应性和可控性。最后但同样重要的是,ChartistJSF支持AJAX更新。
ChartistJSF提供了三种类型的图表:折线图、条形图和饼图。通过以下四个简单步骤,在JSF应用程序中集成这些图表变得简单明了:
首先,项目中必须有素数面和ChartistJSF库。这些库可以通过Maven获得,也可以单独下载。
与每个基于JSF的应用程序一样,必须创建一个托管bean来支持图表模型。
在托管bean中定义了图表模型、数据系列和监听器方法(对图表交互事件做出反应,例如选择图表上的一个项目)。
为了以图形方式呈现数据模型,必须将图表组件添加到xhtml文件中。
让我们按照上面的四个步骤来演示如何轻松地将这些图表集成到JSF演示应用程序中。
第一步是向所需的库添加一个依赖项。在这个演示中,使用了ChartistJSF 2.1。对于ChartistJSF版本2.1,PrimeFaces版本6必须在项目中可用。在一个基于Maven的项目中,对ChartistJSF和andPrimeFaces的依赖是:
<dependency>
<groupId>org.chartistjsf</groupId>
<artifactId>ChartistJSF</artifactId>
<version>2.1</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.0</version>
</dependency>
下一步是创建一个托管bean。ChartBackBean.java豆含有:
LineChartBean.java管理豆如下:
@ManagedBean
public class ChartBackBean {
private LineChartModel lineChartModel;
public ChartBackBean () {
createLineModel();
}
public void createLineModel() {
lineChartModel = new LineChartModel();
lineChartModel.setAspectRatio(AspectRatio.GOLDEN_SECTION);
lineChartModel.addLabel("1");
lineChartModel.addLabel("2");
lineChartModel.addLabel("3");
lineChartModel.addLabel("4");
lineChartModel.addLabel("5");
lineChartModel.addLabel("6");
lineChartModel.addLabel("7");
lineChartModel.addLabel("8");
LineChartSeries lineChartSeries1 = new LineChartSeries();
lineChartSeries1.setName("Series 1");
lineChartSeries1.set(12);
lineChartSeries1.set(21);
lineChartSeries1.set(7);
lineChartSeries1.set(15);
lineChartSeries1.set(12);
lineChartSeries1.set(21);
lineChartSeries1.set(7);
lineChartSeries1.set(15);
LineChartSeries lineChartSeries2 = new LineChartSeries();
lineChartSeries2.setName("Series 2");
lineChartSeries2.set(14);
lineChartSeries2.set(2);
lineChartSeries2.set(8);
lineChartSeries2.set(9);
lineChartSeries2.set(14);
lineChartSeries2.set(2);
lineChartSeries2.set(8);
lineChartSeries2.set(9);
Axis xAxis = lineChartModel.getAxis(AxisType.X);
lineChartModel.addSeries(lineChartSeries1);
lineChartModel.addSeries(lineChartSeries2);
lineChartModel.setAnimateAdvanced(true);
lineChartModel.setShowTooltip(true);
}
public void itemSelect(ItemSelectEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected", "Item Value: "+
((ChartSeries) lineChartModel.getSeries().get(event.getSeriesIndex())).getData().get(event.getItemIndex())
+ ", Series name:" +
((ChartSeries) lineChartModel.getSeries().get(event.getSeriesIndex())).getName());
FacesContext.getCurrentInstance().addMessage(event.getComponent().getClientId(), msg);
}
public LineChartModel getLineModel() {
return lineChartModel;
}
public void setLineModel(LineChartModel lineModel) {
this.lineChartModel = lineModel;
}
}
LineChartModel类提供了控制图表模型其他属性的方法。例如,图表的动画属性可以通过设置动画高级(布尔)方法来控制。
将图表模型组件添加到。xhtml页面,必须在页面中添加以下名称空间:
xmlns:ct=http://www.chartistjsf.org/charts
然后通过以下方式添加图表组件:
< CT:chart id = " LineChart " type = " line " model = " # { LineChartBean . LineMoDEL } "/>
要让图表发送和接收ajax消息,必须在< ct:chart/>标签中添加以下行:
< p:Ajax event = " items select " listener = " # { LineChartBean . items select } " update = " LineChartMessage "/>
最后,为了对ajax更新作出反应,PrimeFaces消息组件用于此演示:
< p:message id = " lineChart message " for = " lineChart " show detail = " true "/>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:ct="http://www.chartistjsf.org/charts">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Prime Faces</title>
</f:facet>
</h:head>
<h:body>
<div style="width: 60%; height: 60%; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto;">
<ct:chart id="lineChart" type="line" model="#{lineChartBean.lineModel}">
<p:ajax event="itemSelect" listener="#{lineChartBean.itemSelect}" update="lineChartMessage" />
</ct:chart>
</div>
<p:message id="lineChartMessage" for="lineChart" showDetail="true" />
</h:body>
</f:view>
</html>
结果是一个漂亮的对用户交互做出反应的折线图。
通过设置。将图表模型上的显示区域(布尔型)设置为真,折线图转换为面积图。
同样的程序也可以用来构建条形图和饼图。
BarChartDataBean.java
@ManagedBean
public class BarChartDataBean {
private BarChartModel barChartModel;
public BarChartDataBean() {
createBarModel();
}
public void createBarModel() {
barChartModel = new BarChartModel();
barChartModel.setAspectRatio(AspectRatio.GOLDEN_SECTION);
barChartModel.addLabel("Measure1");
barChartModel.addLabel("Measure2");
barChartModel.addLabel("Measure3");
barChartModel.addLabel("Measure4");
barChartModel.addLabel("Measure5");
BarChartSeries series1 = new BarChartSeries();
series1.setName("First Series");
series1.set(19);
series1.set(27);
series1.set(12);
series1.set(33);
series1.set(40);
BarChartSeries series2 = new BarChartSeries();
series2.setName("Second Series");
series2.set(13);
series2.set(61);
series2.set(16);
series2.set(28);
series2.set(11);
BarChartSeries series3 = new BarChartSeries();
series3.setName("Third Series");
series3.set(18);
series3.set(11);
series3.set(21);
series3.set(53);
series3.set(48);
Axis xAxis = barChartModel.getAxis(AxisType.X);
xAxis.setShowGrid(false);
barChartModel.addSeries(series1);
barChartModel.addSeries(series2);
barChartModel.addSeries(series3);
barChartModel.setShowTooltip(true);
barChartModel.setSeriesBarDistance(15);
barChartModel.setAnimateAdvanced(true);
}
public BarChartModel getBarChartModel() {
return barChartModel;
}
public void setBarChartModel(BarChartModel barChartModel) {
this.barChartModel = barChartModel;
}
public void barItemSelect(ItemSelectEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected", "Item Value: "
+ ((ChartSeries) barChartModel.getSeries().get(event.getSeriesIndex())).getData().get(
event.getItemIndex()) + ", Series name:"
+ ((ChartSeries) barChartModel.getSeries().get(event.getSeriesIndex())).getName());
FacesContext.getCurrentInstance().addMessage(event.getComponent().getClientId(), msg);
}
}
BarChart.xhtml
<div>
<ct:chart id="barChart" type="bar" model="#{barChartDataBean.barChartModel}">
<p:ajax event="itemSelect" listener="#{barChartDataBean.barItemSelect}" update="barChartMessage" />
</ct:chart>
<p:message id="barChartMessage" for="barChart" showDetail="true" />
</div>
PieChartBean.java
@ManagedBean
public class PieChartBean {
private PieChartModel pieChartModel;
public PieChartBean() {
createPieChart();
}
public void createPieChart() {
pieChartModel = new PieChartModel();
pieChartModel.addLabel("Area 1");
pieChartModel.addLabel("Area 2");
pieChartModel.addLabel("Area 3");
pieChartModel.set(20);
pieChartModel.set(25);
pieChartModel.set(15);
pieChartModel.setShowTooltip(true);
}
public void pieItemSelect(ItemSelectEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected", "Item Value: "
+ pieChartModel.getData().get(event.getItemIndex()));
FacesContext.getCurrentInstance().addMessage(event.getComponent().getClientId(), msg);
}
public PieChartModel getPieChartModel() {
return pieChartModel;
}
public void setPieChartModel(PieChartModel pieChartModel) {
this.pieChartModel = pieChartModel;
}
}
PieChart.xhtml
<div style="width: 60%; height: 60%; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto;">
<ct:chart id="pieChart" type="pie" model="#{pieChartBean.pieChartModel}" >
<p:ajax event="itemSelect" listener="#{pieChartBean.pieItemSelect}" update="pieChartMessage" />
</ct:chart>
<p:message id="pieChartMessage" for="pieChart" showDetail="true" />
</div>
通过设置饼图模型,可以将饼图转换为圆环图。
本文介绍了ChartistJSF库的优点。介绍了将ChartistJSF图表集成到基于JSF的应用程序中的步骤。用简单的例子演示了三种类型的图表。
ChartistJSF库对于基于JSF的应用程序来说是一个易于使用、美观、灵活的图表解决方案。目前,ChartistJSF支持3种类型的图表。如果ChartistJSF的未来版本能支持更多种类的图表,比如气泡图、标尺图等等,那就太好了。我们希望将来能听到更多关于沙特的消息。