Как передать массивы из базового компонента в JavaScript, чтобы нарисовать диаграмму, используя Chart.js в вызове Ajax

Question

Я использую bean-компонент с простыми гранями и Chart.js, чтобы нарисовать диаграмму. Я выбираю строку в таблице данных. По выбору обновления строки Холст, в котором есть Диаграмма. Я получаю значения в методе Selection и строю два массива, один для оси X, а другой для оси y. Как я могу передать эти массивы в JavaScript для визуализации диаграммы. Я пытался передать JSON массив Prime Faces на JavaScript. Я не мог получить значения в JavaScrip.

Вот мой пример кода.xhtml код

    <p:dataTable id="myTbl" var="cars"  value="#{bean.value}"  rowKey="#{bean.carId}"  selection="#{bean.selectedCar}" selectionMode="single"  reflow="true" >            
           <p:ajax event="rowSelect" listener="#{bean.onRowSelect}" update=":chartForm"  oncomplete="drawChart();" /> 
   </p:dataTable>   




          <div class= "chart-container" > 
         <h:outputText id="outputid" value="#{bean.carId}" />              
         <canvas id="myChart"  ></canvas>     


         </div> 




 function drawChart(){   

   var carId = '#{bean.carId}';  

   alert (carId)

Я выбираю строку из таблицы выше. При выборе я хочу получить идентификатор строки, получить данные и отобразить диаграмму chart.js на той же странице.

вот мой класс бобов в классе бобов

частная строка CarID;

методы установки и получения

public void onRowSelect (SelectEvent event) {Cars car = (Cars) event.getObject ();

this.carId  = car.Id ;

}

Я получил значения в Primefaces JSON Array и перешел в JavaScript. В JavaScript я делаю JSON.parse . Первоначально я получил ошибку сериализации, поэтому изменил bean-компонент на запрос области действия. Проблема в том, что я не получаю никаких значений в JavaScript, я удалил JSON Array и, просто передав строку, я могу получить bean.property на странице xhtml, как указано в моем коде, но не могу войти в JavaScript

Answer 1

Вы можете попробовать использовать язык выражений JSF в коде JavaScript

Например:

//<![CDATA[
var jsVar = #{managedBean.property}
//]]>

Answer 2

Хорошо, если вы обеспокоены вызовом (и передачей значений) функции JS из bean-компонента, вы можете вызвать execute из RequestContext.getCurrentInstance() чтобы напрямую вызывать ваш метод сценариев из компонента, как показано ниже:

RequestContext.getCurrentInstance().execute("yourJSFunction('" + param1 + "');");

Тем не менее, я думаю, что вам все еще не хватает хитрости преобразования JSONArray вернуться к JSON объект в JS, который вы можете сделать следующим образом:

Когда передается от бобов:

function yourJSFunction(coordinatesArray) {
    coordinatesArray = JSON.parse(coordinatesArray);
}

Или при использовании в качестве свойства компонента:

var coordinatesArr = JSON.parse('#{yourBean.strProperty}');