Question

我遇到了HighChart Treemaps的问题。我一直在研究具有相同图块的自定义算法。虽然我让我的自定义算法工作（感谢其他SO问题），但我无法实现深入研究。自定义算法适用于父节点。当我点击父母时，只有最新的孩子会覆盖整个地图。我试着自定义算法，但它无处可去。

非常感谢任何帮助。代码发布在JSfiddle上。绿色瓷砖有孩子。紫色父母没有。

function myFunction(parent, children) {
var x = parent.x,
        y = parent.y,
    w=20,
    h=20,i,j,
        childrenAreas = [];
        console.log(parent);
        console.log(children);
Highcharts.each(children, function(child) {   


    if(child.level == 1)
    {
    //console.log("if part"+child.i+" "+x+ " "+y);
    if(x>=parent.width)
       {
       x=parent.x;
       y+=h;

       }
       else
       {
     x+=w;
   }

    }
    else
    {
         //console.log(child);


    } 
childrenAreas.push({
        x: x,
        y: y,
        width: w,
        height: h
    });
 //console.log(parent.x+w);



});
//console.log(childrenAreas);
return childrenAreas;

};

Complete code on JSfiddle

TIA

Answer 1

我认为你的问题与树形图中的钻取工作方式有关。您的布局算法效果很好，但是当您点击您的点时，图表会重新调用（功能类似于缩放到您的点），这就是您拥有不同点数的原因。

您可以进行一些会改变您的第二级点宽度的计算，因此在重新调用后，它们将具有与您之前级别相同的宽度。

    Highcharts.each(children, function(child, i) {
  if (child.level === 1) {
    width = parent.width;
    height = parent.height;
    x = parent.x + i * w;
    childrenAreas.push({
      x: x,
      y: y,
      width: w,
      height: h
    });
  } else {
    pointW = w * w / width;
    pointH = h * h / height;
    x = parent.x + i * pointW;
    childrenAreas.push({
      x: x,
      y: y,
      width: pointW,
      height: pointH
    });
  }
});

在这里，您可以看到一个示例：http://jsfiddle.net/99rbh2qj/8/

您还可以在图表中使用标准的Highcharts明细模块：http://jsfiddle.net/99rbh2qj/5/

最好的问候。

使用Highchart树形图（向下钻取）

1 个答案: