使用Highchart Treemaps(向下)

Working with Highchart Treemaps (drilldown)

本文关键字：向下 Treemaps Highchart 使用      更新时间：2023-09-26

我有一个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;

};

JSfiddle上的完整代码

TIA

我认为你的问题与在treemap中如何进行钻取有关。你的布局算法运行得很好，但当你点击你的点时，图表会重新收缩(类似于放大你的点的功能)，这就是为什么你的点大小不同的原因。

你可以做一些计算，将改变你的第二个关卡点的宽度，所以在召回后，他们将有相同的宽度作为你的前一个关卡。

    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/

问好。

相关文章：