我最近购买了您的 gerOrgChart 插件,并且一直在为一些事情苦苦挣扎。我正在使用自定义主题 1。主题非常适合我。但是,就我而言,每张卡的名称标签都很长。我不喜欢使用 '...' ,而是根据卡片的宽度将整个文本分成多行。我还需要添加一个链接。但是 dataSource 不会呈现我添加到特定数据的 html href 标记。
脚本:
getOrgChart.themes.myCustomTheme =
{
size: [270, 400],
toolbarHeight: 46,
textPoints: [
{ x: 30, y: 50, width: 240},
{ x: 30, y: 120, width: 240},
{ x: 30, y: 150, width: 240}
],
textPointsNoImage: [
{ x: 30, y: 50, width: 240},
{ x: 30, y: 120, width: 240},
{ x: 30, y: 150, width: 240}
],
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="start" width="[width]" class="get-text
get-text-[index]" x="[x]" y="[y]">[text]</text>',
};
var name = '<a href=www.google.com> Google </a>;
data.push({id: current_record_number++ ,parentId: level,
name: name,
Stake: ' 10% Stake',
RevHeading: 'Revenue'
});
data = [{id: 1, parentId: null, name: 'xyz', Stake: '-'}];
var peopleElement = document.getElementById("peoples");
var orgChart = new getOrgChart(peopleElement, {
theme: "myCustomTheme",
enableEdit: false,
scale: 0.5,
enableSearch: false,
linkType: "B",
color: "neutralgrey",
enableGridView: true,
primaryFields: ["name", "Stake", "Date", "RevHeading"],
dataSource: data
});
</script>