时间戳

首页 > 解决方案 > 仅显示 Treemap HighCharts 的 1 个子节点

javascript - 仅显示 Treemap HighCharts 的 1 个子节点

问题描述

我正在研究 TreeMap highcharts API。

当我单击任何节点时，它会转到子节点，但是当我到达最后一个节点时，只有子节点显示没有其他节点。

我的要求是，当我单击任何那个子节点时，只有那个子节点会显示在 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){
    //
 }

我们需要在这一行中编写的内容只显示树形图中的可点击节点，其他节点应该是不可见的。

或者，是否有任何其他属性可以在没有单击事件的情况下处理此要求。

标签： javascripthighcharts

解决方案

要达到这种效果，您需要以适当的方式定义数据 - 将下一个子级嵌套到层次结构中间的点。像这儿：

  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

推荐阅读