我是getorgchart的新手,我正在制作一个orgchart,我遇到了这个徽章记者柜台。当您的演示中没有记者时,它显示0,我需要的是,当没有记者时,应该隐藏或删除徽章。
<!DOCTYPE html>
<html>
<head>
<title>OrgChart | Create Your Own Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="/orgChart/getorgchart/getorgchart.js"></script>
<link href="/orgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="/orgChart/getorgchart/jspdf.debug.js"></script>
<script src="/orgChart/getorgchart/saveSvgAsPng.js"></script>
<script src="/orgChart/getorgchart/svg_to_pdf.js"></script>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
.get-text {
fill: #ffffff !important;
}
.myCustomTheme-box {
fill: #FF8F32;
}
.reporters {
fill: #0072C6;
}
.reporters-text {
fill: #ffffff;
font-size: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="people"></div>
</div>
<p><button>Download</button></p>
<script type="text/javascript">
getOrgChart.themes.myCustomTheme =
{
size: [500, 200],
toolbarHeight: 46,
textPoints: [
{ x: 10, y: 180, width: 490 },
{ x: 200, y: 40, width: 300 },
{ x: 210, y: 65, width: 290 },
{ x: 210, y: 90, width: 290 }
],
textPointsNoImage: [
{ x: 10, y: 180, width: 490 },
{ x: 10, y: 40, width: 300 },
{ x: 10, y: 65, width: 290 },
{ x: 10, y: 90, width: 290 }
],
expandCollapseBtnRadius: 20,
defs: '<filter id="f1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>',
box: '<rect x="0" y="0" height="200" width="500" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)" />',
text: '<text width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
image: '<clipPath id="getMonicaClip"><circle cx="105" cy="65" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="20" y="-20" height="170" width="170"/>',
reporters: '<circle cx="290" cy="230" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="120" x="290" y="237">[reporters]</text>'
};
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
theme: "myCustomTheme",
gridView: true,
linkType: "M",
orientation: getOrgChart.RO_TOP,
enableEdit: true,
enableDetailsView: true,
enableGridView: true,
//enableExportToImage: true,
renderNodeEvent: renderNodHandler,
enablePrint: true,
scale: 0.5,
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
dataSource: [
{ id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@jourrapide.com", adress: "Atlanta, GA 30303", image: "/orgChart/getorgchart/images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson@jourrapide.com", image: "/orgChart/getorgchart/images/f-10.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton@armyspy.com", image: "/orgChart/getorgchart/images/f-9.jpg" },
{ id: 4, parentId: 1, name: "Paul Shetler", title: "Teaching assistant", phone: "330-263-6439", mail: "shetler@rhyta.com", image: "/orgChart/getorgchart/images/f-5.jpg" },
{ id: 5, parentId: 2, name: "Rebecca Francis", title: "Welding machine setter", phone: "408-460-0589", image: "/orgChart/getorgchart/images/f-4.jpg" },
{ id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman@armyspy.com", image: "/orgChart/getorgchart/images/f-8.jpg" },
{ id: 7, parentId: 3, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges@teleworm.us", image: "/orgChart/getorgchart/images/f-7.jpg" },
{ id: 8, parentId: 6, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter@teleworm.us", image: "/orgChart/getorgchart/images/f-6.jpg" },
{ id: 9, parentId: 7, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "/orgChart/getorgchart/images/f-3.jpg" },
{ id: 10, parentId: 7, name: "Callum Whitehouse", title: "Radar controller", phone: "847-474-8775", image: "/orgChart/getorgchart/images/f-2.jpg" }
]
});
function renderNodHandler(sender, args) {
for (var i = 0; i < args.content.length; i++) {
if (args.content[i].indexOf("[reporters]") != -1) {
args.content[i] = args.content[i].replace("[reporters]", args.node.children.length);
}
}
}
document.querySelector("button").addEventListener("click", function () {
svg_to_pdf(document.querySelector("svg"), function (pdf) {
download_pdf('SVG.pdf', pdf.output('dataurlstring'));
});
});
</script>
</body>
</html>
任何想法我怎么能实现它?请帮忙。谢谢
答案 0 :(得分:0)
我“解决”你的问题。在函数&lt;&gt;中,您必须打印&lt;&gt;为了看到数组的结构,我这样做了:
const fs = require('fs-extra');
const os = require('os');
const path = require('path');
const UUID = require('pure-uuid');
const id = new UUID(4).format();
const directory = path.join(os.tmpdir(), id);
fs.mkdirs(directory).then(() => {
console.log(`Created directory: ${directory}`);
});
然后,进入浏览器控制台,你必须检查哪个位置是元素,在我的情况下是位置编号6,当你确定时,在&lt;&gt;内你有“清理”这个位置,就像这样:
console.log("ARGS");
console.log(args);
而且就是这样。我以这种方式“修复”了这个问题。