如何将数组从支持 bean 传递到 JavaScript 以在 Ajax 调用中使用 Chart.js 绘制图表答案

【问题标题】：How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call如何将数组从支持 bean 传递到 JavaScript 以在 Ajax 调用中使用 Chart.js 绘制图表
【发布时间】：2018-09-19 04:43:11
【问题描述】：

我正在使用prime faces backing bean和Chart.js来绘制图表我在数据表中选择一行。在选择行时更新其中包含图表的画布。我正在获取 Selection 方法的值并构建两个数组，一个用于 X 轴，另一个用于 y 轴。如何将这些数组传递给 JavaScript 以呈现图表。我尝试将 Prime faces JSON 数组传递给 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)

我正在从上表中选择一行。在选择时，我想捕获行的 id，获取数据并在同一页面上显示 chart.js 图表

这是我的 bean 类在 Bean 类中

私有字符串 carId;

setter 和 getter 方法

public void onRowSelect(SelectEvent 事件) { Cars car= (汽车) event.getObject();

this.carId  = car.Id ;

}

我将值输入 Primefaces JSON 数组并传递给 JavaScript。在 JavaScript 中，我正在执行 JSON.parse。最初我得到序列化错误，所以将 bean 更改为 request scoped 问题是我没有在 JavaScript 中获取任何值我删除了 JSON 数组，然后只传递了一个字符串我可以在我的代码中提到的 xhtml 页面上获取 bean.property，但无法进入 JavaScript 我错过了什么

【问题讨论】：

分享您的研究对每个人都有帮助。告诉我们您尝试了什么以及为什么它不能满足您的需求。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask
Getting backing bean value with Javascript的可能重复
或stackoverflow.com/questions/5675017/…
你应该使用 JSONArray 来自 bean 的字符串调用 drawChart，在 onRowSelect 的末尾使用 RequestContext.getCurrentInstance().execute("drawChart('" + carId + "');");。
当您更新脚本部分时，使用 EL 直接在脚本中使用 bean 属性的技巧将起作用。

标签： primefaces datatable chart.js javabeans backing

【解决方案1】：

你可以尝试在javascript代码中使用jsf表达式语言

例如：

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

【讨论】：

你能展示你的答案的工作演示吗？
@Трубецкой ，我尝试了上面的代码并没有定义
@JasperdeVries ，我可以通过您提供的链接从托管 bean 调用 java 脚本。我的问题是我可以从页面提交中获取#bean.property，但不能通过 AJAX 调用

【解决方案2】：

好吧，如果你关心从bean调用（和传递值）JS函数，那么你可以调用RequestContext.getCurrentInstance()的execute直接从bean调用你的脚本方法，如下：

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

但是，我认为您仍然会错过在 JS 中将 JSONArray 转换回 JSON 对象的技巧，您可以执行以下操作：

从 bean 传递时：

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

或者当作为 bean 属性使用时：

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

【讨论】：

我正在尝试上面提到的所有解决方案，但仍然无法将值输入到 java 脚本中。也许我会进一步详细说明