使用Highchart Treemaps(向下)
Working with Highchart Treemaps (drilldown)
我有一个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/
问好。
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 无法在jquery中向上或向下移动列表中的多个项目
- jquery在循环中向上/向下移动
- 等待300毫秒,然后使用jQuery向下滑动菜单
- 使用数组向下搜索Javascript对象
- 向下滚动时运行javascript
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- 在jQuery中创建向下滑动子菜单的最有效方法
- CSS3:当页面向下滚动到第一个视口时,是否可以在元素上触发转换
- 如何向下滚动页面,使指定的元素位于顶部
- 带有向下钻取的 Amchart 图表工作正常,但“后退”按钮不起作用
- 如何在定位导航后向下滚动页面
- Skrollr js没有在手机中向下滚动
- 通过鼠标悬停向上或向下滑动的图片
- 如何创建可以向下滚动的导航
- 为移动设备调整页面大小时,引导模式会向下移动页面
- JS/CSS:如何在向下滚动超过1200像素(高度)后更改z索引值
- 当用户已经向下滚动页面时,我如何导航到锚标记
- 使用Highchart Treemaps(向下)