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

Question

在 highcharts 上，我有一个 treemap，有 2 个级别，每个级别都有不同的布局算法。现在我想把我们能看到的限制到目前的水平。这意味着在第 1 级，我不想看到第 2 级的标签，它只会在向下钻取时出现（并且第 1 级的标签会消失）。

我知道使用

levelIsConstant: false

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

这是我目前拥有的链接：

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

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

几乎:-)

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

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

我调整了代码，就ok了。这是我想出的解决方案（它与我的第一个链接不同）： 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);
        }
      }
    }
}

Answer 4

基于@halvor-holsten-strand的答案，我认为最好使用

levelIsConstant: false

，一般禁用数据标签，然后覆盖1级的级别配置。否则，您将不得不添加n-1级配置禁用数据标签。

{
  chart: {
    type: 'treemap',
  },
  plotOptions: {
    treemap: {
      borderWidth: 0,
      dataLabels: {
        enabled: false, // Disable data labels for all levels
      },
    },
  },
  series: [
    {
      name: 'lorem ipsum',
      allowDrillToNode: true,
      levelIsConstant: false,
      levels: [{
        level: 1,
        borderWidth: 1,
        dataLabels: {
          enabled: true, // Enable data labels for level 1
        },
      }],
      data: [/* ... */],
    },
  ],
}