Блог

Главная - Вопросы по программированию - Свернуть Организационную схему Highcharts

Свернуть Организационную схему Highcharts

#highcharts #collapse #organization

Вопрос:

Я использую Highcharts для создания организационных диаграмм, как в приведенном примере : https://jsfiddle.net/vegaelce/7rb6esqt/

Можно ли добавить функцию «свернуть», как в организационной диаграмме Google ? В следующем примере https://jsfiddle.net/vegaelce/kb2gted4 когда вы дважды нажимаете на ячейку «Майк» или «Джим», она сворачивает все ячейки выше. Мне нужно воспроизвести эквивалентный режим с помощью Highcharts, у вас есть идея сделать это ? (в Google API режим сворачивания включен с помощью

     allowCollapse:true

Спасибо

Ответ №1:

В Highcharts нет такой встроенной функции, но вы можете добавить ее, используя событие щелчка и методы отображения/скрытия. Пример:

     plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        const operateChildren = (point, operation) => {
                            point.linksFrom.forEach(link => {
                                link.graphic[operation]();
                                link.toNode.graphic[operation]();

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

                        if (this.linksFrom amp;amp; this.linksFrom[0]) {
                            if (this.linksFrom[0].graphic.visibility === 'hidden') {
                                operateChildren(this, 'show');
                            } else {
                                operateChildren(this, 'hide');
                            }
                        }
                    }
                }
            }
        }
    },

    tooltip: {
        formatter: function(tooltip) {
            if (this.point.graphic.visibility !== 'hidden') {
                return tooltip.defaultFormatter.call(this, tooltip);
            }
            return false;
        }
    }

Живая демонстрация: https://jsfiddle.net/Черная метка/dp03gq6a/

Ссылка на API:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#показать

https://api.highcharts.com/class-reference/Highcharts.SVGElement#скрыть

Комментарии:

1. Большое спасибо за эту функцию. У меня есть 2 дополнительных запроса об этой функции : в следующем примере можно ли «перерисовать» диаграмму после того, как узел сложен/развернут (чтобы оптимизировать оставшееся пространство и перестроить узлы) ? Другие вопросы : можно ли выделить от узла до родителя высокого уровня, когда мышь наведена на узел ? Я видел, что в файле highchart.css что-то подобное сделано, но только для предыдущего родителя и ребенка. Еще раз спасибо за вашу помощь

2. Привет @vegaelce, не могли бы вы создать для этого новый вопрос SO? Я думаю, что для остальных будет лучше разделить эти две темы.

Метки: