Question

我正在尝试将PF5折线图从一个xhtml页面（数据页面）克隆到另一个xhtml页面（报告页面）。图表是：

<div id="lchart">
<p:chart id="ulinechart" type="line" rendered="#{chartDataBean.showLineChart}"
model="#{chartDataBean.userdatLineModel}" responsive="true"/>  
</div>


<button id="reportaction" class="controlbutton" 
type="button onclick="copyChart()">Add Chart
</button>

function copyChart() {
var idincrement = 0;
var original = document.getElementById('topform:ulinechart');

var reportchartholder = document.getElementById('rchartholder');
var clone = original.cloneNode(true);
clone.id = 'ulinechart' + ++idincrement;
reportchartholder.parentNode.appendChild(clone);

}

图表LEGEND和标题仅被克隆，但不是图表图像本身。

然后我尝试在jQuery中克隆图表，如下所示：

function copyChart() {
var imageData = $('ulinechart').jqplotToImageStr({});
var imageElem = $('<img/>').attr('src', imageData);
$('#rchartholder').append(imageElem);
}

产生以下错误：

未捕获的TypeError：无法读取未定义的属性“left” 在e.fn.init.L.fn.jqplotToImageCanvas（charts.js.xhtml？ln = primefaces＆amp; v = 5.3：1）在e.fn.init.L.fn.jqplotToImageStr（charts.js.xhtml？ln = primefaces＆amp; v = 5.3：1）在copyChart（dashboard.js.xhtml？ln = js：172）在HTMLButtonElement.onclick（DatDashT.xhtml：1）

错误是指函数的第二行：

  var imageData = $('ulinechart').jqplotToImageStr({});

我无法找到这个错误以及如何处理它。它似乎与primefaces chart.js文件有关。

研究表明，TypeErrors通常发生在手动添加的jQuery文件和PF jQuery之间存在冲突的地方。

Adding jQuery to PrimeFaces results in Uncaught TypeError over all place

我仔细检查过我正在使用捆绑的PF jQuery。接下来，我检查了chart.js文件本身是否存在问题并找到了：

https://forum.primefaces.org/viewtopic.php?f=3&t=39856

我尝试应用修改建议添加：

<h:outputScript name="charts/charts.js" library="primefaces" />
<h:outputStylesheet name="charts/charts.css" library="primefaces" />

到我的模板页面。错误完全相同。

1）有关错误的任何指导？ 2）有关正确绘制图表方法的建议吗？我应该使用第一个JS方法吗？第二个jQuery图像方法？另一种方法？提前感谢任何建议！

Answer 1

这已经解决了。我认为jQuery错误是由元素div无法正确读取引起的。由于jQuery中的冒号是为jQuery选择器保留的，我必须使用转义键来定义元素div的完整PF路径，如下所示：

function copyChart() {

var imageData = jQuery('#topform\\:ulinechart').jqplotToImageStr({});
var imageElem = jQuery('<img/>').attr('src', imageData);
jQuery('#rchartholder').append(imageElem); 
}

我现在能够将图表克隆为图像。希望这可以帮助。

如何使用Javascript

1 个答案: