Javascript Oracle APEX分面搜索在更改时无法很好地显示BPMN图
我用卡片来显示图表。当页面加载或重新加载时，图表显示良好，但当我使用刻面搜索卡时，区域会刷新而不重新加载，并且图表不适合卡 截图： 卡片区域查询 如何在区域刷新后在卡中正确显示图表Javascript Oracle APEX分面搜索在更改时无法很好地显示BPMN图,javascript,sql,plsql,oracle-apex,bpmn.io,Javascript,Sql,Plsql,Oracle Apex,Bpmn.io,我用卡片来显示图表。当页面加载或重新加载时，图表显示良好，但当我使用刻面搜索卡时，区域会刷新而不重新加载，并且图表不适合卡 截图： 卡片区域查询 如何在区域刷新后在卡中正确显示图表 提前谢谢 我不认为你可以在一个卡片区域中嵌入一个完整的HTML页面，并期望它能完美地工作。web浏览器可能正试图尽其所能处理它，但在刷新后，我并不奇怪它会被损坏。在区域刷新后，您可以单独添加对canvas.zoomfit-viewport的调用，但您需要解决如何为每张卡获取画布对象的问题。或者，使用iframe可能是
提前谢谢 我不认为你可以在一个卡片区域中嵌入一个完整的HTML页面，并期望它能完美地工作。web浏览器可能正试图尽其所能处理它，但在刷新后，我并不奇怪它会被损坏。在区域刷新后，您可以单独添加对canvas.zoomfit-viewport的调用，但您需要解决如何为每张卡获取画布对象的问题。或者，使用iframe可能是可行的，但您必须对其进行测试才能知道-但要使用iframe，您需要提供iframe的源代码，例如使用单独的页面进程，或通过ORDS进行Web服务调用。感谢@JeffreyKemp的回复。除了卡片之外，还有其他方法将图表显示为小图像吗？您可以在任何具有宽度和/或高度限制的div中显示小图像，包括卡片和许多其他区域类型。然而，在您的例子中，您的问题是，您试图将整个网页嵌入到一个div中，如果没有iframe，这是行不通的。我尝试使用iframe，比如：这里是正文内容，但我将整个页面放入了卡片中。
select
ID,
TITLE as CARD_TITLE,
DIAGRAM,
apex_page.get_url (
p_page => 21,
p_items => 'P21_ID',
p_values => "ID") as CARD_LINK,
null as CARD_INITIALS,
null as CARD_SUBTITLE,
null as CARD_SUBTEXT,
'<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- viewer -->
<script src="https://unpkg.com/bpmn-js@7.5.0/dist/bpmn-viewer.development.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<style>
html, body{
height: auto;
padding: 0;
margin: 0;
}
#canvas'|| id ||' {
height: auto;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="canvas'|| id ||'"></div>
<script>
var bpmnViewer = new BpmnJS({
container: "#canvas'|| id ||'"
});
async function openDiagram() {
try {
await bpmnViewer.importXML(`' || diagram || '`);
var canvas = bpmnViewer.get("canvas");
canvas.zoom("fit-viewport");
} catch (err) {
console.error("could not import BPMN 2.0 diagram", err);
}
}
openDiagram();
</script>
</body>
</html>' as CARD_TEXT
from DIAGRAM_TABLE