Question

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

<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>

但是弹出窗口是空白的：

enter image description here

我正在使用 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。

在这里，我的示例expran条形图从primefaces展示。

ChartView.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);
    }
}

chartPrint.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>

输出

enter image description here

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

Answer 2

这是解决方案：

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

Answer 3

PF（'dlg'）。show（）是用于显示对话框的命令。如果要在对话框中显示图表。试试这个。

<p:chart type="line" 
         model="#{chartView.lineModel1}" 
         style="width:500px;height:300px" 
         widgetVar="chart"/>

<br />

<p:commandButton type="button" value="Export" 
                 icon="ui-icon-extlink" 
                 onclick="$('#output').empty().append(PF('chart').exportAsImage());PF('dlg').show();" 
                 />

<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>

或

<p:chart type="line" 
         model="#{chartView.lineModel1}" 
         style="width:500px;height:300px" 
         widgetVar="chart"/>

<br />

<p:commandButton type="button" value="Export" 
                 icon="ui-icon-extlink" 
                 onclick="PF('dlg').show();" 
                 />

<p:dialog widgetVar="dlg" 
          showEffect="fade" 
          modal="true" 
          header="Chart as an Image" 
          resizable="false">
    <p:chart type="line" 
         model="#{chartView.lineModel1}" 
         style="width:500px;height:300px" 
         widgetVar="chart2"/>
</p:dialog>

PrimeFaces：将图表导出为图片

3 个答案: