2
自分のディレクトリからJSONファイルを書き込んでチャートを初期化することができます。しかし、私はindex.html（チャートを含む）のすべての変更が保存され永続化されるシステムを実装しようとするのが苦労しています。究極の目標は、index.htmlがリフレッシュされても同じデータ+ノードを保存することです。この点でローカルJSONファイルを使用してチャートの状態を保存するにはどうすればよいですか？
は、私がupdate、create、removeとdeleteイベントを聞くことができるんだけど、私は、これらのイベントがトリガされると、実際に何をすべきか見当がつかない。これらのイベントから受け取った引数を使用して、ローカルのJSONファイルを直接編集する方法があるはずです。これまでのところ、私は引数を得ることができますが、これらの新しい引数でJSONファイルを更新する方法はわかりません。この点に関するアイデアは高く評価されます。
私のコードがどのように見えますか？ノード+データを永続化する以外は、私が望むすべてのことを行います。
getOrgChart.themes.myCustomTheme = {
size: [270, 400],
toolbarHeight: 46,
textPoints: [{
x: 130,
y: 50,
width: 250
},
{
x: 130,
y: 90,
width: 250
}
],
textPointsNoImage: [{
x: 130,
y: 50,
width: 250
},
{
x: 130,
y: 90,
width: 250
}
],
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="400" width="270" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)" />',
text: '<text text-anchor="middle" width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
image: '<clipPath id="getMonicaClip"><circle cx="135" cy="255" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="50" y="150" height="190" width="170"/>',
reporters: '<circle cx="80" cy="190" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="100" x="80" y="195">[reporters]</text>'
//ddddd: '<text x="0" y="0">1</text>'
};
$.getJSON("http://localhost:8000/data.json", function(source) {
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
photoFields: ["Image"],
linkType: "M",
enableEdit: true,
enableDetailsView: false,
theme: "myCustomTheme",
enableGridView: true,
primaryFields: ["Name", "Title", "Phone", "Address"],
enablePrint: true,
updateNodeEvent: wo,
renderNodeEvent: renderNodHandler,
dataSource: source
});
});
function wo(sender, args) {
n = args.node.data.Name
alert(n)
}
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);
}
}
}html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
.get-text {
fill: #686868 !important;
}
.myCustomTheme-box {
fill: #FFFFFF;
stroke: #DDDAB9;
}
.reporters {
fill: #0072C6;
}
.reporters-text {
fill: #ffffff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="opendb.js"></script>
<script src="getorgchart.js"></script>
<div id="content">
<div id="people"></div>
</div>
次の例は、サーバーからノードを更新、追加、削除する方法を示しています。https://github.com/GetOrgChart/ASP.NET-MVC –
私はnodejsを学びました。このリンクに感謝します。 –