Wie zum senden von JSON mit JSF2 Primefaces Anfrage von Kontext zu Highchart?
Hallo ich habe strugling mit dieser für Stunden, ich will senden meine POJO im JSON-format mit Primefaces Anfrage-Kontext ein Highchart in meinem JSF aktualisieren Ihren Wert.
Grundsätzlich bin ich nach dieser Lösung von @Bhesh Gurung aus seiner eigenen stackoverflow Frage
aber ich kann nicht scheinen, damit es funktioniert. Jetzt ist es wirft ein:
Nicht finden Komponente mit der Kennung "pieData" referenziert von "j_idt31".
Möchte ich erfolgreich erstellen ein highchart mit JSON-Daten durch den Primefaces-Request-Kontext. Bitte um Hilfe vielen Dank im Voraus.
Diese sind meine codes unten
@ManagedBean
@ViewScoped
public class PieDataProvider {
public void retrievePieData() {
List<String> categories = new ArrayList<String>();
categories.add("Electronic");
categories.add("Food");
categories.add("Liguor");
categories.add("Stationary");
categories.add("Mechanical");
List<Integer> itemCounts = new ArrayList<Integer>();
itemCounts.add(5);
itemCounts.add(20);
itemCounts.add(1);
itemCounts.add(50);
itemCounts.add(10);
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("categories", new Gson().toJson(categories));
reqCtx.addCallbackParam("itemCounts", new Gson().toJson(itemCounts));
System.out.println(categories);
}
}Mein xhtml page5.xhtml
<?xml version="1.0" encoding="UTF-8"?><ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<h:head>
<script type="text/javascript">
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
src="http://code.highcharts.com/highcharts.js"
src="http://code.highcharts.com/modules/exporting.js"
</script>
<script type="text/javascript">
function feedPieData(xhr, status, args) {
var categories = eval('(' + args.categories + ')');
var itemCounts = eval('(' + args.itemCounts + ')');
options.xAxis.categories = categories;
var series = {
data : []
};
series.name = new Date().toString();
series.data = itemCounts;
options.series = [ series ];
chart = new Highcharts.Chart(options);
}
</script>
</h:head>
<h:body>
<p:commandLink action="#{pieDataProvider.retrievePieData}"
oncomplete="feedPieData(xhr, status, args);" value="Pie chart demo"
update="pieData" />
</h:body>
</ui:define>
<ui:define name="footer">
<h2>This is page5 Footer</h2>
</ui:define>
</ui:composition>UPDATE: MODIFIED 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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:body>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<h:head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container')
.highcharts(
{
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : 'Most used words, 2010'
},
tooltip : {
pointFormat : '{series.name}: {point.percentage}',
percentageDecimals : 1
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
formatter : function() {
return '<b>'
+ this.point.name
+ '</b>: '
+ this.percentage
//+ ' %'
;
}
}
}
},
series : [ {
type : 'pie',
name : 'Browser share',
data : [ [ 'Red', 45.0 ],
[ 'Orange', 26.8 ], {
name : 'Yellow',
y : 12.8,
sliced : true,
selected : true
}, [ 'Green', 8.5 ],
[ 'Blue', 6.2 ],
[ 'Violet', 0.7 ] ]
} ]
});
});
</script>
<script type="text/javascript">
function feedPieData(xhr, status, args) {
var categories = JSON.parse(args.categories);
var itemCounts = JSON.parse(args.itemCounts);
var series = {
data : []
};
options.series[0].data.length = 0;
series.data = categories;
series.data = itemCounts;
options.series = [ series ];
chart = new Highcharts.Chart(options);
}
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</h:head>
<h:body>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<h:form>
<p:commandLink action="#{pieDataProvider.retrievePieData}"
oncomplete="feedPieData(xhr, status, args);"
value="Pie chart demo" />
</h:form>
</h:body>
</ui:define>
<ui:define name="footer">
<h2>This is page5 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>- Ich habe mehrere Fragen. 1. Wo hast du JSF/PF-Komponente mit der id
pieDataaus Ihrer Sicht? 2. Wo ist der umschließenden<h:form>? - Ich versuche dieses Beispiel stackoverflow.com/questions/6032877/... so weit habe ich nicht herausgefunden, wo ich sollte die pieData Komponenten in der xhtml-und wie Sie initialisiert werden/machen die highchart aus dem link.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Du scheinst nicht zu verstehen, dass Highcharts ist ein JavasScript Umgebung, die läuft nur auf dem client, während PrimeFaces/JSF ist server-seitig und Sie wirken in diesem Zusammenhang einfach als HTML -, CSS-und JavaScript-code-generator.
In Ihrem Fall, PrimeFaces ist einfach zum senden von Daten vom server an den client über
RequestContext. Nach dem AJAX-Aufruf abgeschlossen und wirksam, serialisierte Daten vom client empfangen, Sie rufen eine JavaScript-Funktion erstellt, die Highcharts JS-Komponente komplett auf die Kunden aus den erhaltenen Daten.Alles in allem liefert es uns mit dem folgenden setup.
** Die view-Elemente * * * *
** JavaScript **
** Die Methode Aktion **