叶子的层次结构和数据标签
allowDrillToNode
只缩小到点击组。要更改数据的层次结构和值(数据树的变化),所以你应该重新安排你的代码,并使用的下钻概念:https://www.highcharts.com/docs/chart-concepts/drilldown
创建边界
树形图的叶子被分组使用SVG组(<g>
)和边框不能被添加到这些元素。如果他们是SVG rect
s这将是可能的。
作为一种变通方法,您可以使用Highcharts SVGRenderer
来创建它们:
var values = chart.series[0].tree.children[4].pointValues,
left = chart.plotLeft + values.x * chart.plotWidth/100,
top = chart.plotTop + values.y * chart.plotHeight/100,
width = values.width * chart.plotWidth/100,
height = values.height * chart.plotHeight/100
var path = chart.renderer.path(['M', left, top, 'l', width, 0, 0, height, -width, 0, 0, -height])
.attr({
'stroke-width': 2,
stroke: 'red',
zIndex: 3
})
.add();
带电作业演示:http://jsfiddle.net/kkulig/Lrhacdvr/
API参考:http://api.highcharts.com/class-reference/Highcharts.SVGRenderer
values
数组包含百分比值小组的位置和尺寸。
叶着色
您可以使用一个简单的条件语句而叶分配颜色值:
causeP = {
id: countryP.id + '_' + causeI,
name: causeName[cause],
parent: countryP.id,
value: Math.round(+data[region][country][cause])
};
if (causeP.name === 'SEC') {
causeP.color = 'yellow'
}
这包括在小提琴上面的代码从创建边界这篇文章的一部分。
API参考:http://api.highcharts.com/highcharts/series.treemap.data.color
谢谢卡米尔·库利格的出色答复。我从你的投入中找出了一些发展。请找到我更新的小提琴http://jsfiddle.net/8kbdph9k/。我有两个问题1.我应该在每个级别上留下一个颜色,使现有颜色留下最后一个叶节点。 2.我没有得到ztree顶层的总和/平均值。我恳请你帮忙。在此先感谢 –
** 1。问题:**我不太明白。你能否准备一些视觉例子或详细描述在这种情况下叶子应该如何着色。 ** 2。问题:**当您悬停在绘图区(出现工具提示)时,您是否想要全部数据(MEA,AM,EU ...)? –
问题1:请参阅https://drive.google.com/open?id=1PmevlLPdvt9SgJhZgBgYCR142_mLFjMb中每个级别的颜色解释图像,问题2:我想控制每个级别的工具提示,并且我shuld能够自己选择每个级别应该出现的逻辑,例如:级别0将是级别1的平均值,级别1应该是级别2和级别2的总和,应该显示任何其他自定义计算。我希望我回答你的问题。请让我知道,如果我可以有任何进一步的信息。 –