jsf - PrimeFaces:将图表导出为图片

Question

我正在尝试将我的 PF 图表导出为展示后的图片:

enter link description here

<h:form id="form1">
    <p:chart type="line" value="#{chartView.lineModel1}" 
             style="width:500px;height:300px" 
             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:500px;height:300px"/>
    </p:dialog>
</h:form>
<script type="text/javascript">
    function exportChart() {
        //export image
        $('#output').empty().append(PF('chart').exportAsImage());

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

但是弹窗是空白的:

我正在使用 PF v5.1 但我已经尝试了两种方法:

PF v3.5 或更早版本:

$('#output').empty().append(chart.exportAsImage()); dlg.show();  

对于 PF v4.0 或更新版本:

$('#output').empty().append(PF('chart').exportAsImage()); PF('dlg').show();

我做错了什么？

Answer 1

我的项目中也有您的要求。但是，我使用 jquery 修复了它。它正在工作 PF-4 或 PF-5。 下载 jquery.js 和 html2canvas.js。我的 jQuery 版本是 jQuery v1.7.2。

在这里，我的示例从 primefaces showcase 导出条形图。

图 TableView .java

@ManagedBean
public class ChartView implements Serializable {

    private BarChartModel barModel;

    @PostConstruct
    public void init() {
        createBarModels();
    }

    public BarChartModel getBarModel() {
        return barModel;
    }

    private BarChartModel initBarModel() {
        BarChartModel model = new BarChartModel();

        ChartSeries boys = new ChartSeries();
        boys.setLabel("Boys");
        boys.set("2004", 120);
        boys.set("2005", 100);
        boys.set("2006", 44);
        boys.set("2007", 150);
        boys.set("2008", 25);

        ChartSeries girls = new ChartSeries();
        girls.setLabel("Girls");
        girls.set("2004", 52);
        girls.set("2005", 60);
        girls.set("2006", 110);
        girls.set("2007", 135);
        girls.set("2008", 120);

        model.addSeries(boys);
        model.addSeries(girls);

        return model;
    }

    private void createBarModels() {
        createBarModel();
    }

    private void createBarModel() {
        barModel = initBarModel();

        barModel.setTitle("Bar Chart");
        barModel.setLegendPosition("ne");

        Axis xAxis = barModel.getAxis(AxisType.X);
        xAxis.setLabel("Gender");

        Axis yAxis = barModel.getAxis(AxisType.Y);
        yAxis.setLabel("Births");
        yAxis.setMin(0);
        yAxis.setMax(200);
    }
}

图表打印.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>

输出

不要忘记在对话框中使用appendToBody="true"。