我使用getOrgChart新版本在SVG中拥有2000个节点。我想将完整的SVG导出到PNG,但PNG仅显示在浏览器上呈现的节点。就像在浏览器上呈现20个节点一样,PNG仅显示20个节点,但是我需要整个SVG具有2000个节点。
答案 0 :(得分:0)
此处是BALKANGraph开发人员的传播者。
默认情况下,如果要更改必须折叠的子级,则必须添加自己的导出节点菜单项
这里是一个例子:
function pdf(nodeId) {
chart.exportPDF("MyFileName.pdf", true, nodeId);
}
function png(nodeId) {
chart.exportPNG("MyFileName.png", true, nodeId);
}
function svg(nodeId) {
chart.exportSVG("MyFileName.svg", true, nodeId);
}
var chart = new OrgChart(document.getElementById("tree"), {
menu: {
export_pdf: {
text: "Export PDF",
icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"),
onClick: pdf
},
export_png: {
text: "Export PNG",
icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"),
onClick: png
},
export_svg: {
text: "Export SVG",
icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"),
onClick: svg
}
},
nodeMenu: {
export_pdf: {
text: "Export PDF",
icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"),
onClick: pdf
},
export_png: {
text: "Export PNG",
icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"),
onClick: png
},
export_svg: {
text: "Export SVG",
icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"),
onClick: svg
}
},
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img"
},
tags:{
collapsed: {state: BALKANGraph.COLLAPSE}
},
nodes: [
{ id: 1, tags: ["collapsed"], name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: 3, pid: 1, name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
{ id: 4, pid: 3, name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
]
});
html, body{
width: 100%;
height: 100%;
padding: 0;
margin:0;
overflow: hidden;
font-family: Helvetica;
}
#tree{
width:100%;
height:100%;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>
如果将图表导出到所有节点上方,则会展开