Jsf PrimeFaces：将图表导出为图片_Jsf_Jsf 2_Primefaces_Charts

Jsf PrimeFaces：将图表导出为图片

jsf jsf-2 primefaces charts

Jsf PrimeFaces：将图表导出为图片,jsf,jsf-2,primefaces,charts,Jsf,Jsf 2,Primefaces,Charts,我正在尝试将我的PF图表导出为展示下面的图片：对于PF v4.0或更新版本： $('#output').empty().append(PF('chart').exportAsImage()); PF('dlg').show(); 我做错了什么？PF（'dlg'）。show（）是用于显示对话框的命令。如果要在对话框中显示图表。试试这个 <p:chart type="line" model="#{chartView.lineModel1}" st

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

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

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

我做错了什么？

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>

或

这是解决方案：

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

我也喜欢你在我的项目要求。但是，我通过使用

jquery

修复了它。它正在工作PF-4或PF-5。 Downlaod

jquery.js

和

html2canvas.js

。我的jquery版本是

jquery v1.7.2

下面是primefaces showcase中的exprot条形图示例

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>


函数saveAsImage（）{
html2canvas（$（“#imageFrom\\：条形图”）{
onrendered：函数（画布）{
画布=画布；
document.body.appendChild（画布）；
$（“#imageFrom\\：output”）.append（画布）；
}
});
}

输出

不要忘记在对话框中使用
appendToBody=“true”
。
您在哪里将图形设置为对话框的图像？您只是在单击按钮时显示对话框？理想情况下，您应该在单击按钮时以图像的形式获取图表，并将其设置为dialog，然后显示对话框。对不起，我已更新了我的问题。导出是javascript函数的一部分。谢谢，但第一个变量与我使用的相同，它也只显示空白对话框。第二个变体没有将图表导出为JPG（它只是在弹出对话框中显示图表）。。。。。。。。。。。
function exportChart() { $('#form1\\:output').empty().append(chart.exportAsImage()); dlg.show(); }

@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); } }

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