面向Java服务器(JSF)应用的响应图表库

简体中文 English

ChartistJSF是一个面向Java服务器面(JSF)应用程序的响应和简单的图表库。ChartistJSF基于Chartist.js，这是一个轻量级且响应迅速的基于JavaScript的图表库。为了与Java服务器页面应用程序兼容，ChartistJSF建立在PrimeFaces之上。

与其他图表库相比，ChartistJSF提供了几个好处。在ChartistJSF中，风格和功能是分开的，所以维护图表有很大的灵活性。关于ChartistJSF的另一个注意事项是使用SVG而不是基于画布的图形。SVG图形更加轻量级，具有良好的表现质量，并且由于它们基于XML的结构，它们的元素可以很容易地使用JavaScript和CSS进行操作。此外，通过使用@mediaCSS的查询(由于风格和功能的分离)，图表更具响应性和可控性。最后但同样重要的是，ChartistJSF支持AJAX更新。

ChartistJSF提供了三种类型的图表:折线图、条形图和饼图。通过以下四个简单步骤，在JSF应用程序中集成这些图表变得简单明了:

  1. 首先，项目中必须有素数面和ChartistJSF库。这些库可以通过Maven获得，也可以单独下载。

  2. 与每个基于JSF的应用程序一样，必须创建一个托管bean来支持图表模型。

  3. 在托管bean中定义了图表模型、数据系列和监听器方法(对图表交互事件做出反应，例如选择图表上的一个项目)。

  4. 为了以图形方式呈现数据模型，必须将图表组件添加到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豆含有:

  • 图表模型:折线图模型。
  • 数据系列:将创建两个带有一些随机数的数据系列，用于演示目的。
  • 对图表中的onClick事件做出反应的侦听器方法。当选择图表上的某个项目时，此方法会做出反应。在PrimeFaces消息机制的帮助下，所选项目的值将显示在图表下方。

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的未来版本能支持更多种类的图表，比如气泡图、标尺图等等，那就太好了。我们希望将来能听到更多关于沙特的消息。