Highcharts

Question

在 highcharts 上，我有一个 treemap 2 层 ，每个层都有 不同的布局算法 .现在我想把我们能看到的限制在当前水平。就是说在level 1上，不想看到level 2的labels，只有下钻的时候才会出现（level 1的labels会消失）

我知道 levelIsConstant: false 很容易，但这只适用于 1 层，我使用 2 层是因为我需要不同的布局。

这是我目前拥有的 link：

series: [{
  type: "treemap",
  allowDrillToNode: true,
  alternateStartingDirection: true,
  levels: [{
    level: 1,
    layoutAlgorithm: 'squarified',
    dataLabels: {
      enabled: true,
      align: 'left',
      verticalAlign: 'top',
      style: {
        fontSize: '15px',
        fontWeight: 'bold'
      }
    }
  }, {
    level: 2,
    layoutAlgorithm: 'stripes',
    color: 'blue'
  }],
  //...

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

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

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

Answer 1

您可以使用我的一些设置来实现此目的 (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 2

谢谢，对于标签问题，这是一个聪明的主意，但正如我所说，我不能使用 levelIsConstant: false 因为我每时每刻都需要为每个级别使用不同的布局。有了这个解决方案，当我在顶层时，两个级别都可以有不同的布局，但是当我向下钻取时，我很快就失去了新视图的正确布局。

几乎:-)

编辑： 好吧，我终于成功了。我认为不可能以我尝试的方式实现这一点，即对系列的每个子点使用 parent 选项以确定树的层次结构。因此，我没有使用具有层次结构的系列，而是将一个系列用于顶层，我 link 将多个系列用于下面的级别。由于 drilldown 选项，我能够做到这一点。

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

我调整了代码，就可以了。这是我想出的解决方案（它与我的第一个 link 不同）： http://jsfiddle.net/ff964fog/47/

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

我仍然需要调整一些东西（比如底部动画的消失），但最终我得到了我想要的！

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 - 在多层次和多布局树图中隐藏子标签

Highcharts - Hide child labels in a multiple levels and multiple layouts treemap

layout

labels

treemap

levels