Arbeiten mit Highchart Treemaps (Drilldown)

Question

Ich habe ein Problem mit HighChart Treemaps. Ich habe an einem benutzerdefinierten Algorithmus mit gleichen Kacheln gearbeitet. Obwohl ich meinen benutzerdefinierten Algorithmus zum Laufen gebracht habe (Dank anderer SO-Fragen), kann ich keinen Drilldown erreichen. Der benutzerdefinierte Algorithmus funktioniert perfekt für die übergeordneten Knoten. Wenn ich auf einen Elternteil klicke, deckt nur das letzte Kind die gesamte Karte ab. Ich habe versucht, den Algo anzupassen, aber es ging nirgendwohin.

Jede Hilfe wird sehr geschätzt. Code auf JSfiddle veröffentlicht. Und die grüne Kachel hat Kinder. Lila Elternteil hat keins.

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

Ich denke, dass Sie Probleme mit verbunden ist, wie Drill-Down in treemap arbeitet. Ihr Layout-Algorithmus hat gut funktioniert, aber wenn Sie auf Ihren Punkt klicken, wird das Diagramm rescalling (Funktionalität ähnlich dem Zoomen in Ihren Punkt) und das ist der Grund, warum Sie unterschiedliche Größe Ihrer Punkte haben.

Sie können einige Berechnungen vornehmen, die die Breite der Punkte auf dem zweiten Level ändern, so dass sie nach dem Rescalling dieselbe Breite wie Ihr vorheriges Level haben.

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 
    }); 
    } 
}); 

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann: http://jsfiddle.net/99rbh2qj/5/

Mit freundlichen Grüßen: http://jsfiddle.net/99rbh2qj/8/

Sie können auch Standard Highcharts Drill-Down-Modul in Ihrem Diagramm verwenden.