。无法在Primefaces中将图表导出为图像？ [英] .Cannot export chart as image in Primefaces?

问题描述

我不能将素面图导出为图像。

I cannot export prime-faces chart as Image.

categoryModel 与Prime-show Case相同。

categoryModel is same as Prime-show Case.

是否需要依赖库来导出？

Is it need dependency lib to export?

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    ......
    template="/common/commonLayout.xhtml">
    <ui:define name="content">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            //<![CDATA[
            function exportChart() {
                //export image
                $('#output').empty().append(chart.exportAsImage());

                //show the dialog
                dlg.show();
            }
            //]]>
        </script>

        <h:form enctype="multipart/form-data">
            <p:barChart id="basic" value="#{ChartActionBean.categoryModel}" legendPosition="ne"  
                        title="Bar Chart" widgetVar="chart" animate="true" yaxisLabel="Number of Count"/>
            <p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportChart()"/>  

            <p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Chart as an Image">  
                <p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>  
            </p:dialog>  
        </h:form>
    </ui:define>
</ui:composition>

推荐答案

在Showcase和Export按钮和OutputPanel中没有包装因此，$（'＃output'）可以选择期望的元素来附加图像。

In Showcase and Export button and OutputPanel are not wrapped in so $('#output') is able to pick the expected element to append the image.

但是在您的情况下，您将这些组件包装了起来，因此JSF会生成一个像j_idt10这样的表单的id和组件的id输出将变为 j_idt10：output。

But in your case you have wrapped these components in so JSF will generate an id for form like j_idt10 and the component's id "output" will become "j_idt10:output".

要解决此问题：

<h:form id="form1">
  //chart
  // export button
  //dialog containing outputPanel
</h:form>

在javascript中：

And in javascript:

function exportChart() {
     $('#form1\\:output').empty().append(chart.exportAsImage());
     dlg.show();
}

或简单地放在和 $（'＃output'） .empty（）。append（chart.exportAsImage（））; 将按预期工作。

or simply put outside the and $('#output').empty().append(chart.exportAsImage()); will work as expected.

这篇关于。无法在Primefaces中将图表导出为图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！