Highcharts -在多层次和多布局树图中隐藏子标签

oewdyzsn  于 9个月前  发布在  Highcharts
关注(0)|答案(4)|浏览(108)

在highcharts上,我有一个树图,有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颜色,我可以隐藏它下面的节点,但我仍然不能隐藏它们的标签!
fquxozlt

fquxozlt1#

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

    • 我认为这是不可能实现这一点的方式,我试图,这是使用 * 父 * 选项的每个子点的系列,以确定层次结构的树。因此,我没有使用一个具有层次结构的系列,而是使用一个系列作为顶层,并将其链接到下面的几个系列。我之所以能够做到这一点,要归功于 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
    },

我仍然需要调整一些东西(比如底层动画的消失),但最终我得到了我想要的!

yruzcnhs

yruzcnhs2#

我采取了一些设置,你可以用来实现这一点(JSFiddle):

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

仅当从标高1查看时才应用标高2设置。向下钻取时,由于levelIsConstant: false,新视图被视为级别1。
仅当您希望在从标高1查看时隐藏标高2的网格时,才需要在标高2中设置borderWidth: 0

new9mtju

new9mtju3#

您可以为plotOptions.treemap.datalabels使用自定义格式化程序。下面的代码是一个使用this.series.rootNodethis.point.parent的例子,并比较它们来检查标签是否应该显示:

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

可以使用格式化程序函数中可用的任何其他属性。只需在formatter函数中记录(console.logthisdata即可查看所有可用属性:

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

yhuiod9q4#

基于@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: [/* ... */],
    },
  ],
}

相关问题