[JAVA] Étendre les Highfaces pour inverser l'axe vertical du graphique

Je veux inverser l'axe du graphique

Lors de la création d'un graphique linéaire d'un certain classement avec Highfaces, il est nécessaire de définir la valeur maximale de l'axe y sur 0 car il s'agit d'un classement. Cependant, HighCharts n'avait pas «inversé» (une option pour inverser l'axe), nous allons donc créer une balise personnalisée afin que «inversé» puisse être spécifié.

Étendre les gestionnaires de balises et les composants

Étendez les gestionnaires de balises et les composants suivants pour les graphiques et les axes de graphique. À ce stade, un accesseur est ajouté à la classe ChartAxisEx afin que l'attribut «inversé» puisse être spécifié.

ChartHandler.java

public class ChartHandlerEx extends ChartHandler {
	public ChartHandlerEx(ComponentConfig config) {
		super(config);
	}
}

ChartHandler.java

@FacesComponent("hogehoge.component.ChartEx")
public class ChartEx extends Chart {
}

ChartAxis.java

@FacesComponent("hogehoge.component.ChartAxisEx")
public class ChartAxisEx extends ChartAxis {
	public Object getReversed() {
		return Object.class.cast(this.getStateHelper().eval("reversed", null));
	}

	public void setReversed(Object value) {
		this.getStateHelper().put("reversed", value);
	}
}

Étendre le moteur de rendu

Étendez la classe ChartRenderer pour afficher l'option «inversé» et ajoutez ce qui suit à la méthode appelée «encodeAxes».

ChartRendererEx.java

@FacesRenderer(componentFamily = "org.highfaces.component", rendererType = "hogehoge.renderer,ChartRendererEx")
@ListenerFor(systemEventClass = PostAddToViewEvent.class)
public class ChartRendererEx extends ChartRenderer {

    @Override
    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    //réduction
    }

    private void encodeAxes(FacesContext context, Chart cv, JSONObject high) throws JSONException, IOException {
    //réduction
    if (axis.getReversed() != null) {
        j.put("reversed", axis.getReversed());
    }
}

Créer taglib.xml

Créez taglib.xml dans src / main / resources / META-INF et spécifiez la classe étendue ci-dessus.

xml:highfaces.taglib.xml

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
	version="2.0">
	<namespace>http://hogehoge.jp/taglib</namespace>
	<tag>
		<tag-name>chartEx</tag-name>
		<component>
			<component-type>hogehoge.component.ChartEx</component-type>
			<renderer-type>hogehoge.renderer.ChartRendererEx</renderer-type>
			<handler-class>hogehoge.component.ChartHandlerEx</handler-class>
		</component>
		<attribute>
			<description><![CDATA[Type of the charts, possible values are line, spline, area, column, bar and pie]]></description>
			<name>type</name>
			<required>true</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[List of HTML colors for the chart series. Defaults to "#2f7ed8,#0d233a,#8bbc21,#910000,#1aadce,#492970,#f28f43,#77a1e5,#c42525,#a6c96a".]]></description>
			<name>colors</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Datasource of the component, can be a Collection or Map type. Provide either a value, a model or chartseries as children declared in the xhtml file.]]></description>
			<name>value</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Datasource of the component, must implement the ChartModel interface. Provide either a value, a model or chartseries as children declared in the xhtml file.]]></description>
			<name>model</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[ValueExpression of the currently selected Series.]]></description>
			<name>selectedSeries</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[ValueExpression of the currently selected Point inside the selected Series. This corresponds to the category/value of the x axis.]]></description>
			<name>selectedPoint</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[JavaScript to be executed on point selection.]]></description>
			<name>onselect</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Height of chart in px]]></description>
			<name>height</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Width of chart in px]]></description>
			<name>width</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Title for the chart]]></description>
			<name>title</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Credits text for the chart]]></description>
			<name>credits</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Zoom type text for the chart]]></description>
			<name>zoomType</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Sub Title for the chart]]></description>
			<name>subTitle</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Label for x-axis]]></description>
			<name>xaxisLabel</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Label for y-axis]]></description>
			<name>yaxisLabel</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Name of the request scoped variable used as iterator for value]]></description>
			<name>var</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Index of currently rendered item during iteration over the Collection in value-Attribute]]></description>
			<name>rowIndexVar</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[ValueExpression of the value of a point, bar,... Only valid if used in combinatino with value.]]></description>
			<name>point</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[ValueExpression of the tickLabel for a single point. Only valid if used in combinatino with value.]]></description>
			<name>tickLabel</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[ID of rerender component for ajax actions]]></description>
			<name>render</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[JavaScript function name for client side customization. All highcharts configuration options are available inside the function using 'this'.]]></description>
			<name>extender</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[Whether to stack the values of each series on top of each other. Possible values are 'none', 'normal' or 'percent', defaulting to 'none'.]]></description>
			<name>stacking</name>
			<required>false</required>
			<type>java.lang.String</type>
		</attribute>
		<attribute>
			<description><![CDATA[If set, this is the time interval in seconds that the updateMethod will be called and series data will change.]]></description>
			<name>updateInterval</name>
			<required>false</required>
			<type>java.lang.Integer</type>
		</attribute>
		<attribute>
			<description><![CDATA[How many points should be always visible in the chart in liveUpdate mode ? Defaults to 20.]]></description>
			<name>updateCapacity</name>
			<required>false</required>
			<type>java.lang.Integer</type>
		</attribute>
		<attribute>
			<description><![CDATA[This method will be called via AJAX each time, the chart needs to update the visible data. Use it to change or add data to the displayed series.]]></description>
			<name>updateMethod</name>
			<required>false</required>
			<type>javax.el.MethodExpression</type>
		</attribute>
		<attribute>
			<description><![CDATA[JavaScript to be executed on mouse over event.]]></description>
			<name>onmouseover</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[JavaScript to be executed on mouse over event.]]></description>
			<name>onmouseoverpoint</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
	</tag>
	<tag>
		<tag-name>chartAxisEx</tag-name>
		<component>
			<component-type>hogehoge.component.ChartAxisEx</component-type>
		</component>
		<attribute>
			<description><![CDATA[Position of this axis. Possible values are n, w, s or e.]]></description>
			<name>position</name>
			<required>true</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Angle in degrees if the tickLabel should be rotated. Defaults to 0.]]></description>
			<name>tickAngle</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Color of the gridline for this axis within the chart.]]></description>
			<name>gridLineColor</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Width of the gridline for this axis within the chart. Use 0 to not display a gridline.]]></description>
			<name>gridLineWidth</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Type of this axis. Possible values are linear, category and datetime, defaulting to linear.]]></description>
			<name>type</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Label-Style of this axis. Use CSS definition style to e.g. define a color.]]></description>
			<name>style</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Title of this axis.]]></description>
			<name>title</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Label-Format of this axis. To display e.g. mm use "{value} mm"]]></description>
			<name>format</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Minimum value for this axis]]></description>
			<name>min</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Maximum value for this axis]]></description>
			<name>max</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
		<attribute>
			<description><![CDATA[Reversed for this axis]]></description>
			<name>reversed</name>
			<required>false</required>
			<type>java.lang.Object</type>
		</attribute>
	</tag>
</facelet-taglib>

En fait utiliser

Maintenant que vous avez une balise personnalisée, assurez-vous que vous pouvez spécifier «inversé» dans la balise «chartAxisEx».

hogehoge.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:hf="http://highfaces.org"
	xmlns:ex="http://hogehoge.jp/taglib">
<h:head>
	<title>graphique hogehoge</title>
</h:head>
<h:body>
	<ex:chartEx type="line" title="graphique hogehoge">
		<hf:chartSerie name="Quelque chose de classement"
			value="#{hogehogeBean}"
			var="rank" point="#{rank.rank}" tickLabel="#{rank.time}">
		</hf:chartSerie>
		<ex:chartAxisEx position="w" min="1" max="100" reversed="true"
			title="" />
		<ex:chartAxisEx position="s" title="" type="datetime"
			format="{value:%Y.%m.%d}" />
	</ex:chartEx>
</h:body>
</html>

Terminé

Vous pouvez maintenant étendre les Highfaces pour inverser les axes du graphique.

BEFORE:

AFTER: