javascript - 组织结构图未显示所有标签

标签 javascript html css highcharts

我正在尝试创建组织结构图。显示了聊天的一些标签，但将鼠标悬停时显示名称。我找不到给节点的数据有任何问题，并且我注意到占据相同位置的任何节点都有相同的问题。

使用的插件:https://www.highcharts.com/docs/chart-and-series-types/organization-chart

问题的现场演示:

https://jsfiddle.net/nikhilnediyodath/Lzf862h5/6/ 

Highcharts.chart('container', {
    chart: {
        height: 1300,
        width: 1200,
        inverted: true
    },

    title: {
        text: 'USTF Organization Chart'
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var nodeName = point.toNode.name,
                    nodeId = point.toNode.id,
                    nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
                    parentDesc = point.fromNode.id;
                return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
            }
        }
    },

    series: [{
        type: 'organization',
        name: 'USTF Organization Chart',
        keys: ['from', 'to'],
        data: data,
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            width: 200
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            // height: 25
        }, {
            level: 2,
            color: '#980104'
        }, {
            level: 4,
            color: '#359154'
        }],

        nodes: nodes,
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 65
    }],
    tooltip: {
        outside: true,
        backgroundColor: '#AAA'
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 1200,
        sourceHeight: 1300
    }

});
/* .highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
} */

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

#container h4 {
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}

#container p {
    font-size: 13px;
    line-height: 16px;
}

@media screen and (max-width: 600px) {
    #container h4 {
        font-size: 2.3vw;
        line-height: 3vw;
    }

    #container p {
        font-size: 2.3vw;
        line-height: 3vw;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body::-webkit-scrollbar {
            width: .2em;
        }

        body::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }

        body::-webkit-scrollbar-thumb {
            background-color: darkgrey;
            outline: 1px solid slategrey;
        }

        a {
            text-decoration: none;
        }

        figure {
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
    </style>
</head>

<body>
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>

</body>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    var data = [
        [1, 2],
        [2, 3],
        [3, 4],
        [3, 5],
        [3, 6],
        [3, 7],
        [3, 8],
        [3, 9],
        [8, 10],
        [8, 11],
        [8, 12],
        [8, 13],
        [8, 14],
        [8, 15],
        [8, 16],
        [8, 17],
        [8, 18],
        [8, 19],
        [8, 20],
        [8, 21],
        [9, 22],
        [9, 23],
        [9, 24],
        [9, 25],
        [9, 26],
        [9, 27],
        [9, 28],
        [9, 29],
        [9, 30],
        [9, 31],
        [9, 32],
        [9, 33]
    ];
    var nodes = [{
        "id": 1,
        "parent_id": null,
        "label": "Board of Trustees",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EBoard of Trustees\u003C\/a\u003E",
        "layout": null
    }, {
        "id": 2,
        "parent_id": "1",
        "label": "Exicutive Committee",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EExicutive Committee\u003C\/a\u003E",
        "layout": null
    }, {
        "id": 3,
        "parent_id": "2",
        "label": "Chancellor",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EChancellor\u003C\/a\u003E",
        "layout": null
    }, {
        "id": 4,
        "parent_id": "3",
        "label": "internal Auditor",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003Einternal Auditor\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 5,
        "parent_id": "3",
        "label": "Legal Advisor",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003ELegal Advisor\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 6,
        "parent_id": "3",
        "label": "Office of Community Engagment",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Community Engagment\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 7,
        "parent_id": "3",
        "label": "Office of Institutional Plannig and Effectivness",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Institutional Plannig and Effectivness\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 8,
        "parent_id": "3",
        "label": "vice Chancellor for Academic Affairs ",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003Evice Chancellor for Academic Affairs \u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 9,
        "parent_id": "3",
        "label": "Vice Chancellor for Administrative and Financial Affairs",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EVice Chancellor for Administrative and Financial Affairs\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 10,
        "parent_id": "8",
        "label": "Council for academic affairs",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003ECouncil for academic affairs\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 11,
        "parent_id": "8",
        "label": "Collages",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003ECollages\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 12,
        "parent_id": "8",
        "label": "Deanship of Collage Affirs",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EDeanship of Collage Affirs\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 13,
        "parent_id": "8",
        "label": "Student Housing",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EStudent Housing\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 14,
        "parent_id": "8",
        "label": "Trining Center",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003ETrining Center\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 15,
        "parent_id": "8",
        "label": "Office of Career Counseling",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Career Counseling\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 16,
        "parent_id": "8",
        "label": "Continuing Education Center",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EContinuing Education Center\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 17,
        "parent_id": "8",
        "label": "Office of Alumini",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Alumini\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 18,
        "parent_id": "8",
        "label": "Deanship of Graduate Studies and Research",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EDeanship of Graduate Studies and Research\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 19,
        "parent_id": "8",
        "label": "Office of Admission and Registration",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Admission and Registration\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 20,
        "parent_id": "8",
        "label": "Library and Learning Resources",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003ELibrary and Learning Resources\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 21,
        "parent_id": "8",
        "label": "Office of International Academic Affairs",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of International Academic Affairs\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 22,
        "parent_id": "9",
        "label": "Office of Finance",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Finance\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 23,
        "parent_id": "9",
        "label": "Office of Budget and Planning",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Budget and Planning\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 24,
        "parent_id": "9",
        "label": "Office of Procurement",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Procurement\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 25,
        "parent_id": "9",
        "label": "Office of Scholarship and Financial Aid",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Scholarship and Financial Aid\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 26,
        "parent_id": "9",
        "label": "Office of University Fecilities",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of University Fecilities\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 27,
        "parent_id": "9",
        "label": "Documentation Center",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EDocumentation Center\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 28,
        "parent_id": "9",
        "label": "Office of Develepment and sustainability",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Develepment and sustainability\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 29,
        "parent_id": "9",
        "label": "Office of Human Resources",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Human Resources\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 30,
        "parent_id": "9",
        "label": "Office of Public Relations",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Public Relations\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 31,
        "parent_id": "9",
        "label": "Office of Marketing and Communication",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Marketing and Communication\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 32,
        "parent_id": "9",
        "label": "Office of Medical Service",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Medical Service\u003C\/a\u003E",
        "layout": "hanging"
    }, {
        "id": 33,
        "parent_id": "9",
        "label": "Office of Information Technology",
        "redirect": null,
        "created_at": null,
        "updated_at": null,
        "name": "\u003Ca href=\u0022#\u0022 style=\u0022color:white;\u0022\u003EOffice of Information Technology\u003C\/a\u003E",
        "layout": "hanging"
    }];
    console.log('data', data);
    console.log('nodes', nodes);
</script>

</html>

最佳答案

它看起来像一个错误:https://github.com/highcharts/highcharts/issues/13100 。该错误已被修复，在 master 分支上运行良好:https://jsfiddle.net/BlackLabel/pwxbzut5/并将在下一个版本后包含在 npm 代码中。

现在请使用建议的解决方法:

dataLabels: {
    allowOverlap: true
}

API:https://api.highcharts.com/highcharts/series.line.dataLabels.allowOverlap

或者主代码。

关于javascript - 组织结构图未显示所有标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61486545/

上一篇：javascript - 如何将 DocumentFragment 居中对齐？

下一篇：javascript - 在对象 javascript 中添加项目/值

相关文章：

css - 容器中的两个 float 列，增加容器高度以匹配列的最佳方法？

php - 单击时 Glyphicon 不旋转

javascript - 如何在 AngularJS 中向二维数组添加项目

CSS:对齐div中的元素

iphone - 在应用程序(全屏)模式下使用 iPhone HTML5 进行 Azure 移动 Facebook 身份验证

CSS3 字符编码声明

html - 当我将鼠标悬停在元素上时显示 sibling

javascript - 无法在 angular-ui typeahead 上显示结果

javascript - 在 jQuery 中添加新行时禁用其他选择框的选定选项

javascript - 大图像和 JavaScript

©2024 IT工具网  联系我们