2017-10-10 94 views
0

我设法从高图创建树图,但我坚持实现以下几点,高级树形图Groupby叶子对象在级别1(父级)和子级级别1级别(子对象)用自定义颜色编码

选项1:仅启用在各自级别的标签看到图像连接
选项2:每个事业每事业的名字自定义颜色编码
方案3:组彩色边框指示分组
方案四:第一级应只显示原因(NI,SEC,CC)而不是显示应该聚合子节点的区域查看图像以获得更多理解

点击链接https://photos.app.goo.gl/fUleBrR5OWfdgyiQ2为代词图像

请在这里找到小提琴http://jsfiddle.net/mailsakthi/hj642eng/2/

选项5:如何使不同层次(Level 1和Level 3不同的标签只应显示为1级)启用的不同排列和组合。我可以提及与标签选项相同的内容吗?

levels: [{ 
      level: 1, // 1,3 or 2,3 etc. more than 1 label 
      layoutAlgorithm: 'squarified', 
      dataLabels: { 
       enabled: true, 
         } 
     }] 

让我知道,如果我可以有任何进一步的信息。谢谢。

回答

0

叶子的层次结构和数据标签

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

+0

谢谢卡米尔·库利格的出色答复。我从你的投入中找出了一些发展。请找到我更新的小提琴http://jsfiddle.net/8kbdph9k/。我有两个问题1.我应该在每个级别上留下一个颜色,使现有颜色留下最后一个叶节点。 2.我没有得到ztree顶层的总和/平均值。我恳请你帮忙。在此先感谢 –

+0

** 1。问题:**我不太明白。你能否准备一些视觉例子或详细描述在这种情况下叶子应该如何着色。 ** 2。问题:**当您悬停在绘图区(出现工具提示)时,您是否想要全部数据(MEA,AM,EU ...)? –

+0

问题1:请参阅https://drive.google.com/open?id=1PmevlLPdvt9SgJhZgBgYCR142_mLFjMb中每个级别的颜色解释图像,问题2:我想控制每个级别的工具提示,并且我shuld能够自己选择每个级别应该出现的逻辑,例如:级别0将是级别1的平均值,级别1应该是级别2和级别2的总和,应该显示任何其他自定义计算。我希望我回答你的问题。请让我知道,如果我可以有任何进一步的信息。 –