Highcharts, setze Legendenhöhe dynamisch

Question

Ich möchte die Höhe der Legende dynamisch festlegen, wenn die Größe des Containers geändert wird, wird die Legendenhöhe automatisch angepasst. Idealerweise sollte die Höhe der Legende die Hälfte der Höhe des Diagrammcontainers betragen.

Geige: https://jsfiddle.net/rredondo/awac1dw8/

Beachten Sie, dass, wenn der Behälter kleiner wird, die Zeichnungsfläche des Diagramms wird auch kleiner, bis sie verschwindet, weil die Legende, um den Raum einnimmt. Dies ist das Verhalten, das ich vermeiden möchte. Auch habe ich versucht, maxHeight auf eine Nummer zu setzen. Das Problem bei diesem Ansatz ist, dass es nicht dynamisch ist und viel Platz verschwendet, wenn der Wert zu klein ist.

Die Legende Optionen sind:

legend: { 
     align: 'center', 
     verticalAlign: 'bottom', 
     layout: 'vertical', 
     enabled: true, 
     //maxHeight: 150 
}, 

Das Layout vertikal eingestellt werden müssen, und die Legende muss unterhalb des Diagramms positioniert werden.

Answer 1

Hier ist eine Lösung, die legend.update() auf jedem Kartenaufbau verwendet (es ist gestartet auch nach dem Diagramm dargestellt wird): https://jsfiddle.net/kkulig/2s8dnk6f/

Die adjustLegendHeight Funktion setzt legend.maxHeight auf die Hälfte der Diagrammhöhe:

function adjustLegendHeight(chart) { 
    console.log(chart); 
    chart.legend.update({ 
    maxHeight: chart.chartHeight/2 
    }); 
} 

Beachten Sie, dass update Funktion Feuer redraw in sich. Um zu verhindern, unendlich rekursive Aufrufe I globale Variable verwendet, die radrawing steuert:

events: { 
    redraw: function() { 
    if (redrawingEnabled) { 
     // disable redrawing to prevent infinite recursive redraw() loop (update() fires redraw by default) 
     redrawingEnabled = false; 

     adjustLegendHeight(this); 

     // enable redrawing after update and redraw are finished 
     redrawingEnabled = true; 
    } 
    } 
} 

let redrawingEnabled = true; 
 

 
function adjustLegendHeight(chart) { 
 
    chart.legend.update({ 
 
    maxHeight: chart.chartHeight/2 
 
    }); 
 
} 
 

 
var chart = Highcharts.chart('container', { 
 
    chart: { 
 
    plotBackgroundColor: null, 
 
    plotBorderWidth: null, 
 
    plotShadow: false, 
 
    type: 'pie', 
 
    events: { 
 
     redraw: function() { 
 
     if (redrawingEnabled) { 
 
     \t // disable redrawing to prevent infinite recursive redraw() loop (update() fires redraw by default) 
 
      redrawingEnabled = false; 
 
      
 
      adjustLegendHeight(this); 
 
     
 
      // enable redrawing after update and redraw are finished 
 
      redrawingEnabled = true; 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    title: { 
 
    text: '' 
 
    }, 
 
    plotOptions: { 
 
    pie: { 
 
     allowPointSelect: true, 
 
     cursor: 'pointer', 
 
     dataLabels: { 
 
     enabled: false 
 
     } 
 
    } 
 
    }, 
 
    legend: { 
 
    align: 'center', 
 
    verticalAlign: 'bottom', 
 
    layout: 'vertical', 
 
    enabled: true 
 
    }, 
 
    series: [{ 
 
    name: 'Brands', 
 
    colorByPoint: true, 
 
    showInLegend: true, 
 
    data: [{ 
 
     name: 'Microsoft Internet Explorer', 
 
     y: 56.33 
 
    }, { 
 
     name: 'Chrome', 
 
     y: 24.03, 
 
     sliced: true, 
 
     selected: true 
 
    }, { 
 
     name: 'Firefox', 
 
     y: 10.38 
 
    }, { 
 
     name: 'Safari', 
 
     y: 4.77 
 
    }, { 
 
     name: 'Opera', 
 
     y: 0.91 
 
    }, { 
 
     name: 'Proprietary or Undetectable', 
 
     y: 0.2 
 
    }, { 
 
     name: 'Microsoft Internet Explorer', 
 
     y: 56.33 
 
    }, { 
 
     name: 'Chrome', 
 
     y: 24.03, 
 
     sliced: true, 
 
     selected: true 
 
    }, { 
 
     name: 'Firefox', 
 
     y: 10.38 
 
    }, { 
 
     name: 'Safari', 
 
     y: 4.77 
 
    }, { 
 
     name: 'Opera', 
 
     y: 0.91 
 
    }, { 
 
     name: 'Proprietary or Undetectable', 
 
     y: 0.2 
 
    }, { 
 
     name: 'Microsoft Internet Explorer', 
 
     y: 56.33 
 
    }, { 
 
     name: 'Chrome', 
 
     y: 24.03, 
 
     sliced: true, 
 
     selected: true 
 
    }, { 
 
     name: 'Firefox', 
 
     y: 10.38 
 
    }, { 
 
     name: 'Safari', 
 
     y: 4.77 
 
    }, { 
 
     name: 'Opera', 
 
     y: 0.91 
 
    }, { 
 
     name: 'Proprietary or Undetectable', 
 
     y: 0.2 
 
    }] 
 
    }] 
 
}); 
 

 
adjustLegendHeight(chart);

#container { 
 
    height: 100%; 
 
    width: 250px; 
 
    position: absolute; 
 
}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container"></div>

Answer 2

Zuerst haben Sie versucht, layout: 'horizontal' zu verwenden? Es teilt die Liste der Elemente in der Legende in Teile auf, zeigt eine ziemlich ordentliche Paginierung und befindet sich auf relativ kleinem Raum.

Wenn nicht, ich glaube, um Diagrammlegende zu verwalten, haben Sie keine anderen Optionen als auf API-Dokumente zu graben. Wenn Sie sich die API reference ansehen, gibt es viele Optionen, die Sie in Ihrem Diagramm definieren können. Zum Beispiel legend.lineHeight oder legend.margin und andere, die helfen können, die Größe des Legendencontainers zu ändern.

Es gibt auch eine einzige Methode legend.update() wo Sie ein Objekt mit neuen Optionen übergeben können, um Ihre Legende bei Bedarf zu aktualisieren.

Der Trick besteht also darin, die Größe des Containers/Fensters zu verfolgen und sie mit gewünschten Parametern zu aktualisieren. Die ähnliche Art und Weise ein Diagramm mit ChartJS gemacht wurde here Größe verändert