[JAVA] Erweitern Sie Highfaces, um die vertikale Achse des Diagramms umzudrehen

Ich möchte die Achse des Diagramms invertieren

Beim Erstellen eines Liniendiagramms einer bestimmten Rangfolge mit Highfaces muss der Maximalwert der y-Achse auf 0 gesetzt werden, da es sich um eine Rangfolge handelt. HighCharts hatte jedoch kein "Umkehren" (eine Option zum Umkehren der Achse), daher erstellen wir ein benutzerdefiniertes Tag, damit "Umgekehrt" angegeben werden kann.

Erweitern Sie Tag-Handler und -Komponenten

Erweitern Sie die folgenden Tag-Handler und -Komponenten für Diagramme und Diagrammachsen. Zu diesem Zeitpunkt wird der ChartAxisEx-Klasse ein Accessor hinzugefügt, damit das Attribut "umgekehrt" angegeben werden kann.

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);
	}
}

Erweitern Sie den Renderer

Erweitern Sie die ChartRenderer-Klasse, um die Option "umgekehrt" auszugeben, und fügen Sie der Methode "encodeAxes" Folgendes hinzu.

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 {
    //Kürzung
    }

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

Erstellen Sie taglib.xml

Erstellen Sie taglib.xml in src / main / resources / META-INF und geben Sie die oben erweiterte Klasse an.

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>

Eigentlich verwenden

Nachdem Sie ein benutzerdefiniertes Tag haben, stellen Sie sicher, dass Sie im Tag "chartAxisEx" "umgekehrt" angeben können.

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>Hogehoge Graph</title>
</h:head>
<h:body>
	<ex:chartEx type="line" title="Hogehoge Graph">
		<hf:chartSerie name="Etwas Ranking"
			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>

Erledigt

Jetzt können Sie Highfaces erweitern, um die Achsen des Diagramms umzudrehen.

BEFORE:

AFTER: