getOrgChart多行标题和链接

时间:2018-04-10 05:36:39

标签: javascript css getorgchart

我最近购买了你的gerOrgChart插件,并且一直在努力解决一些问题。我使用自定义主题1.主题对我很有用。但是,在我的情况下,每张卡的名称标签都很长。我宁愿没有' ...' ,但整个文本根据卡的宽度分成多行。我还需要添加一个链接。但是dataSource不会渲染html href标签Im添加到特定数据。

脚本:

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>

1 个答案:

答案 0 :(得分:1)

我们修改了创建您自己的主题1页面,以向您展示如何实现所请求的功能http://www.getorgchart.com/experimental/create-your-own-theme-1.html