使用Highchart Treemaps（向下鑽取）

我有HighChart Treemaps的問題。我一直在研究一個具有相同瓦片的自定義算法。雖然我有我的自定義算法工作（感謝其他SO問題），但我無法實現向下鑽取。自定義算法適用於父節點。當我點擊一位父母時，只有最新的孩子覆蓋整個地圖。我嘗試定製算法，但它沒有去。使用Highchart Treemaps（向下鑽取）

任何幫助，高度讚賞。代碼發佈在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

來源

2016-07-01 Pavan

我認爲你的問題與鑽在樹形圖中是如何工作的連接。你的佈局算法運行良好，但是當你點擊你的點時，圖表就會重新調用（功能類似於放大你的觀點），這就是你點數不同的原因。

您可以進行一些計算，這會改變您的第二關卡點寬度，因此重新掃描後它們將具有與先前關卡相同的寬度。

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/

最好的問候。

來源

2016-07-01 12:42:03

工程就像一個魅力！非常感謝！解釋+1！ :) – Pavan

嘿@Grzegorz，我有一個問題。如果我開始向數據數組添加更多元素，它不會顯示，也不會顯示在下一行中。如何在畫布寬度耗盡後顯示拼貼？現在，顯示的元素的最大數目是11. 11之後，我推送到數組的任何數量的元素都不會顯示。請幫忙。 – Pavan

你可以用標準的Highcharts鑽取來看這個例子：http://jsfiddle.net/99rbh2qj/9/我已經改變了自定義函數 –

使用Highchart Treemaps（向下鑽取）

回答

相關問題