在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颜色,我可以隐藏它下面的节点,但我仍然不能隐藏它们的标签!
4条答案
按热度按时间fquxozlt1#
谢谢你,这是一个聪明的想法标签的问题,但正如我所说,我不能使用 levelIsConstant:false 因为我需要一个不同的布局为每个级别在每一个时刻。使用这个解决方案,当我在顶层时,两个层次都可以有不同的布局,但是当我向下钻取时,我很快就失去了新视图的正确布局。
几乎:-)
我在官方文档中找到了解决方案:http://www.highcharts.com/docs/chart-concepts/drilldown
我调整了代码,一切正常。以下是我提出的解决方案(它与我的第一个链接不同):http://jsfiddle.net/ff964fog/47/
我仍然需要调整一些东西(比如底层动画的消失),但最终我得到了我想要的!
yruzcnhs2#
我采取了一些设置,你可以用来实现这一点(JSFiddle):
仅当从标高1查看时才应用标高2设置。向下钻取时,由于
levelIsConstant: false
,新视图被视为级别1。仅当您希望在从标高1查看时隐藏标高2的网格时,才需要在标高2中设置
borderWidth: 0
。new9mtju3#
您可以为
plotOptions.treemap.datalabels
使用自定义格式化程序。下面的代码是一个使用this.series.rootNode
和this.point.parent
的例子,并比较它们来检查标签是否应该显示:可以使用格式化程序函数中可用的任何其他属性。只需在formatter函数中记录(
console.log
)this
和data
即可查看所有可用属性:yhuiod9q4#
基于@halvor-holsten-strand的答案,我认为最好使用
levelIsConstant: false
,禁用数据标签,然后覆盖级别1的级别配置。否则,您将不得不添加n-1个禁用数据标签的级别。