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

Это решение:

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

Answer 2

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> 

Answer 3

Я также, как ваше требование в моем проекте. Но я исправил его, используя jquery. Он работает PF-4 или PF-5. Downlaod jquery.js и html2canvas.js. Моя версия jquery - jQuery v1.7.2.

Здесь приведен пример примера диаграммы exprot из графика штриховки.

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> 

Выход

Не забудьте использовать appendToBody="true" в диалоге.