У меня проблемы с нахождением лучшего способа передачи данных из Java-компонента поддержки / управляемого компонента в компонент jQuery / Javascript, такой как Highcharts, чтобы мое веб-приложение генерировало / отображало данные в динамическом режиме в реальном времени. Я довольно хорошо разбираюсь в Java, но у меня довольно ограниченное знание JavaScript / jQuery, в котором я, очевидно, и падаю. Насколько я прочитал, лучший способ - это Ajaxify скрытого поля в моем веб-приложении и передать объект или строку JSON? к нему, а затем передать это значение в мой компонент JS.
Во-первых, это кажется немного трудоемким, так как у меня будет вызов Ajax для обновления данных JSON, а затем вызов setInterval для повторного чтения данных в компонент JS? Я надеялся, что смогу передать данные прямо в компонент JS ...
В любом случае кто-то может просто подтвердить мои знания и рассказать мне хороший испытанный и проверенный метод, если он отличается от описанного выше ... Руководства / демонстрационные материалы также будут высоко оценены !!
Я также использую Primeface 2.2.1, если это повлияет на предложенную методологию?
Приветствия
Союзник
UPDATE:
Код приведен ниже, но я просто хочу описать то, что я пытаюсь достичь быстро: эффективно я пытаюсь реализовать динамическую диаграмму Highcharts, используя простую функцию count ++ из моего компонента поддержки. Очевидно, что в дальнейшем я буду использовать канал в реальном времени для предоставления этих данных, но в данный момент я просто пытаюсь заставить работать Highcharts, основываясь на изменении информации из моего компонента поддержки JSF.
Вот моя простая функция подсчета и преобразование в JSON (я не уверен, действительно ли необходим метод JSON, поскольку передается только 1 значение (int), но я хотел бы сохранить этот метод, так как уверен, что буду использовать более широко в других частях веб-приложения):
public class TestBean {
private int output;
public TestBean() {
output = 1;
}
public int getOutput() {
return output;
}
public void setOutput(int output) {
this.output = output;
}
public void update() {
setOutput(getOutput() + 1);
}
public void prepareChartDate() {
// Produce you JSON string (I use Gson here)
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("chartData", new Gson().toJson(output));
}
}
Внешний JS-файл Highcharts, опять же стоит отметить, что я сохранил функцию ряда в нижней части диаграммы, чтобы построить / заполнить график, прежде чем я начну добавлять значения, полученные из JSF Beans:
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
backgroundColor: "#F8F0DB",
renderTo: 'containerHigh',
defaultSeriesType: 'area',
margin: 10,
marginLeft:30,
marginBottom:17,
zoomType: 'y',
events: {
load: updateChartData
}
},
title: {
text: 'Feed Flow Rate '
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 100],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 10000,
y: 50 * Math.random()
});
}
return data;
})()
}]
});
});
И встроенная функция JS на моей странице XHTML:
Это работает:
function updateChartData(xhr, status, args) {
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime()
y = 50 * Math.random();
series.addPoint([x, y], true, true);
}, 1000)
//parse it, process it and load it into the chart
}
но когда я пытаюсь передать значение моего бина:
function updateChartData(xhr, status, args) {
var jsonString = args.chartData
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime()
y = jsonString
series.addPoint([x, y], true, true);
}, 1000)
//parse it, process it and load it into the chart
}
Это не работает ...
Кроме того, я пробовал и remoteCommand, и Poll, чтобы заставить диаграмму работать, ни с чем я не добился успеха:
<h:form>
<p:commandButton value="update" action="#{testBean.update}" update="beanvalue"/>
<h:outputText value="#{testBean.output}" id="beanvalue"/> <br />
<h:outputText value="#{testBean.output}" id="chartValue"/> <br />
<p:commandButton value="Load" type="button" onclick="fetchChartData();"/>
<p:remoteCommand name="fetchChartData"
action="#{testBean.prepareChartDate()}"
oncomplete="updateChartTest(xhr, status, args);"/>
</h:form>
Как я уже говорил до Bhesh, ваша помощь очень ценится и больше будет великолепна!
Приветствия
Союзник