突出显示 Highcharts 组织结构图节点答案

【问题标题】：Highlight Highcharts Organization Chart nodes突出显示 Highcharts 组织结构图节点
【发布时间】：2021-11-05 05:48:50
【问题描述】：

我正在使用 Highcharts 创建组织结构图，单击时可以折叠每个节点，如提供的示例：http://jsfiddle.net/vegaelce/83uktasc/

当鼠标悬停一个节点时，我想突出显示完整路径（从顶级父节点到子节点）。

这里有一个例子：https://www.highcharts.com/blog/tutorials/how-to-use-an-org-chart-more-effectively/

我看到在

中提供了高亮显示

@import 'https://code.highcharts.com/css/highcharts.css';

但它只突出显示第一级父级。

如何实现？

【问题讨论】：

标签： highcharts highlight organization

【解决方案1】：

您可以通过与实现折叠类似的方式使颜色更亮。示例：

const operateChildren = (point, operation) => {
    point.linksFrom.forEach(link => {
        operation([
            link.toNode.graphic,
            link.graphic,
            link.toNode.dataLabel
        ]);

        operateChildren(link.toNode, operation);
    });
};

const hideElements = (elements) => {
    elements.forEach(element => {
        element.hide();
    });
}

const showElements = (elements) => {
    elements.forEach(element => {
        element.show();
    });
}

const highlighElements = (elements) => {
    const color = elements[0].attr('fill');

    elements[0].attr({
        fill: Highcharts.Color(color).brighten(0.3).get()
    });
};

Highcharts.chart('container', {
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        if (this.linksFrom && this.linksFrom[0]) {
                            if (this.linksFrom[0].graphic.visibility === "hidden") {
                                operateChildren(this, showElements);
                            } else {
                                operateChildren(this, hideElements);
                            }
                        }
                    },
                    mouseOver: function() {
                        if (this.linksFrom) {
                            highlighElements([this.graphic]);
                            operateChildren(this, highlighElements);
                        }
                    }
                }
            },
            ...
        }
    },
    ...
});

现场演示： http://jsfiddle.net/BlackLabel/s70ujvwy/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Color

【讨论】：