Показать только 1 дочерний узел Treemap HighCharts - PullRequest
Новая
       10

Показать только 1 дочерний узел Treemap HighCharts

0 голосов
/ 16 июня 2020

Я работаю над API highcharts TreeMap.

Когда я нажимаю на любой узел, он переходит к дочернему узлу, но когда я достигаю последнего узла, отображаются только дочерние элементы, у которых нет других узлов.

Мои требования: когда я нажимаю на любой из дочерних узлов, в treeMap будет отображаться только этот дочерний узел, остальные дочерние узлы должны быть невидимы.

Ниже мой код. 

Highcharts.chart('container', {
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        allowDrillToNode: true,
        animationLimit: 1000,
        allowTraversingTree: true,
        interactByLeaf : false,
        dataLabels: {
            enabled: false
        },
        levelIsConstant: false,
        levels: [{
            level: 1,
            dataLabels: {
                enabled: true
            },
            borderWidth: 3
        }],
        data: points
    }],
    subtitle: {
        text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
    },
    title: {
        text: 'Global Mortality Rate 2012, per 100 000 population'
    },  
    plotOptions: {
        series: {
            events: {
                click: function (event) {
                    if (event.point.node.childrenTotal == 0) {
                       alert('test')                           
                    }
                }
            }
        }
    }
});

Пожалуйста, помогите мне с этой строкой 

if (event.point.node.childrenTotal == 0){
    //
 }

Что нам нужно написать в этой строке, чтобы отображался только интерактивный узел в карте дерева другие узлы должны быть невидимыми.

Или есть какое-нибудь другое свойство, которое обрабатывает это требование без события щелчка.

1 Ответ

0 голосов
/ 18 июня 2020

Для достижения этого эффекта вам необходимо правильно определить свои данные - вложить следующего дочернего элемента в точку, которая находится в середине иерархии. Как здесь: 

  series: [{
    type: "treemap",
    allowDrillToNode: true,
    data: [{
        id: 'B',
        name: 'Bananas',
        color: "#ECE100"
      }, {
        name: 'Test',
        parent: 'B',
        id: 'Test',
        value: 10
      }, {
        name: 'Test',
        parent: 'Test',
        value: 2
      }]
  }]

Демо: https://jsfiddle.net/BlackLabel/Lkzpey9v/

API: https://api.highcharts.com/highcharts/series.treemap.allowDrillToNode

...