Question

在highcharts上，我有一个树形图， 2级，每个都有不同的布局算法。现在我想限制我们可以看到的当前水平。这意味着在第1级，我不希望看到级别2的标签，这只会在向下钻取时显示（并且级别1的标签将消失）。

我知道res很容易，但这仅适用于1级，我使用2级因为我需要不同的布局。

以下是我目前所拥有的链接：

levelIsConstant: false

http://jsfiddle.net/dhfera2y/2/

我希望隐藏所有名称，以及分隔它们的线条。

编辑：在每个级别上使用rgba颜色，我可以隐藏它下面的节点，但我仍然无法隐藏它们的标签！

Answer 1

谢谢你对标签问题一个明智的想法，但正如我所说，我不能使用 levelIsConstant：false ，因为我每时每刻都需要不同的布局。有了这个解决方案，当我处于最顶层时，两个级别都可以有不同的布局，但是当我向下钻取时，我会松开新视图的正确布局。

几乎： - ）

编辑：好的，所以我终于成功了。我认为不可能以我想要的方式实现这一点，即为系列的每个子点使用 parent 选项以确定树的层次结构。所以我没有使用一个具有层次结构的系列，而是使用一个系列作为顶层，我链接到下面几个级别的几个系列。感谢 drilldown 选项，我能做到这一点。

我在官方文档中找到了解决方案： http://www.highcharts.com/docs/chart-concepts/drilldown

我调整了代码，没关系。这是我提出的解决方案（这与我的第一个链接不同）： http://jsfiddle.net/ff964fog/47/

series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      borderWidth: 3,
      data: modulesData
    }],
    drilldown: {
      series: servicesSerie
    },

我仍然需要调整一些东西（比如底层动画的消失），但最后我还有我想要的东西！

Answer 2

我对您可以用来实现此目的的一些设置（JSFiddle）：

series: [{
    type: "treemap",
    allowDrillToNode: true,
    levelIsConstant: false,
    // ...
    levels: [{
        level: 1,
        dataLabels: {
            enabled: true
        }
        // ...
    }, {
        level: 2,
        borderWidth: 0,
        dataLabels: {
            enabled: false
        }
    }],
    data[{
        //...
    }]
}]

级别2设置仅在从级别1查看时适用。向下钻取时，由于levelIsConstant: false，新视图被视为级别1。

只有在从1级查看时才要隐藏2级网格，才需要在级别2中设置borderWidth: 0。

Answer 3

您可以为plotOptions.treemap.datalabels使用自定义格式器。下面的代码是使用this.series.rootNode和this.point.parent并比较它们以检查是否应显示标签的示例：

plotOptions: {
    treemap: {
      dataLabels: {
        formatter: function(data) {
          if (this.point.parent == (this.series.rootNode || null)) {
            return this.key;
          }
        }
      }
    }
}

您可以使用格式化程序功能中可用的任何其他属性。只需在格式化程序功能中记录（console.log，this和data即可查看所有可用属性：

plotOptions: {
    treemap: {
      dataLabels: {
        formatter: function(data) {
          console.log(this, data);
        }
      }
    }
}

Highcharts - 在多个级别和多个布局树图中隐藏子标签

3 个答案: