javascript - 如何在模态中显示 primefaces 图表？

Question

我用javascript生成图像并在模态中显示结果，但图像离开模态:http://s2.subirimagenes.com/imagen/9603018modal.png

这是我的代码:

XHTML

<h:form id = "form1">
    <p:chart widgetVar="chart" style="width:1200px;height:400px" type = "bar" model="#{graphicBean.barModel}" rendered="#{not empty graphicBean.barModel}"/>
    <p:commandButton onclick ="exportChart()" value = "Execute"/>
    <b:commandButton class="btn btn-primary" value="Show" ajax="true" oncomplete="$('.modalGraphic').modal();return false;" />
</h:form>

<b:modal id="id_modalGraphic" styleClass="modalGraphic" title="Guarda el gráfico">
     <h:form id = "resultado">
         <h:panelGroup id="output" layout="block" style="width:100px;height:100px"></h:panelGroup>
    </h:form>
</b:modal>

JavaScript

function exportChart() {
  $('#resultado\\:output').empty().append(PF('chart').exportAsImage());
}

我想要一张短图片或带有卷轴的原始尺寸图片。

谢谢!

Answer 1

我想你可以试试这个方法:

<p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">

    here goes what you want to show in the modal

</p:dialog> 

这是使用 primefaces