Primefaces 饼图导出按钮无法正常工作

Question

我想将我的 primefaces 饼图导出为图像，我按照 Primefaces Showcase for doing so. The problem is when I click the export button, the window freezes and the chart is not exported as an image, hence I cannot right click and save it. I have tried the solutions given in PrimeFaces: export chart as picture and .Cannot export chart as image in Primefaces? 进行操作，但无法解决我的问题。下面是我的代码：

    <p:panelGrid id="subPanelGrid" columns="1" style="width:100%" layout="grid">
    <table style="width: 50%;">
        <tr>
            <td><p:column>
                    <div dir="ltr" class="chartContainer">
                        <p:chart type="pie" model="#{myExample.myPieChart}" style="width:600px;height:340px" widgetVar="chart" />

                        <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" resizable="false">
                            <p:outputPanel id="output" layout="block" style="width:600px;height:340px" />
                        </p:dialog>
                    </div>
                </p:column></td>
        </tr>
    </table>
</p:panelGrid>

这是我的脚本：

<script type="text/javascript">
                function exportChart() {
                    $('#output').empty()
                            .append(PF('chart').exportAsImage());
                    PF('dlg').show();
                }
            </script>

先谢谢你。

Answer 1

是的，这是 primefaces 经常出现的问题...如果您使用的是 primefaces 5 或 +，您可以尝试（因为您的网格不在表格中）

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

它存在这里描述的其他方式PrimeFaces: export chart as picture

根据@CycDemo 的说法，考虑尝试以下方法（我没有尝试过，但人们似乎已经投票了）：

下载 jquery.js 和 html2canvas.js。如果您使用 Maven，只需在依赖项中添加 pom.xml：

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>html2canvas</artifactId>
  <version>0.4.1</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>2.1.4</version>
</dependency>

然后在您的 .xhtml

<h:head>
    <h:outputScript library="primefaces" name="#{request.contextPath}/js/jquery.min.js"/>
    <script type="text/javascript" src="#{request.contextPath}/js/html2canvas.js"></script>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
</h:head>
<h:body>
    <h:form id="imageFrom">
        <script type="text/javascript">
            function saveAsImage() { 
                html2canvas($("#imageFrom\:barChart"), {
                    onrendered: function(canvas) {
                        theCanvas = canvas;
                        document.body.appendChild(canvas);
                        $("#imageFrom\:output").append(canvas);
                    }
                });
            }
        </script>
        <p:chart type="bar" id="barChart" model="#{chartView.barModel}" style="width:500px;height:300px;"/>     
        <p:commandButton id="btnSave" value="Export" onclick="saveAsImage();PF('eventDialog').show();"/>
        <p:dialog id="eventDialog" widgetVar="eventDialog" resizable="false" width="520" height="300" appendToBody="true">
            <p:outputPanel id="output"/>
        </p:dialog>
    </h:form>
</h:body>

希望对您有所帮助:)

Answer 2

我在尝试将饼图导出为图像时遇到同样的问题（其他类型的图表，如条形图或折线图没有问题）。我还注意到该错误仅在属性 'ShowDataLabels' 设置为 true 时发生。

有一个未解决的问题：https://github.com/primefaces/primefaces/issues/920

Primefaces 饼图导出按钮无法正常工作

Primefaces piechart export button not working properly

jqplot

primefaces

pie-chart