ハイチャート、凡例の高さを動的に設定する

Question

凡例の高さを動的に設定したいので、コンテナのサイズが変更されると凡例の高さが自動的に調整されます。 凡例の高さはチャートコンテナの高さの半分にするのが理想的です。

フィドル： https://jsfiddle.net/rredondo/awac1dw8/

注コンテナが小さくなるよう伝説がスペースを取っているので、それが消えるまで、グラフのプロットエリアも小さくなります。これは避けたい行動です。 また、番号をmaxHeightに設定しようとしました。このアプローチの問題は、動的ではなく、値が小さすぎると多くのスペースを無駄にすることです。

凡例オプションは次のとおり

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

レイアウトは、垂直に設定する必要があり、および凡例は、グラフの下に配置されなければなりません。

Answer 1

をリサイズして、同様の方法は、ここで（チャートが描画された後に、それはまた、発売しています）、すべてのチャートの再描画にlegend.update()を使用するソリューションです：https://jsfiddle.net/kkulig/2s8dnk6f/

adjustLegendHeight関数はの半分にlegend.maxHeightを設定し、グラフの高さ：update関数は自身の中redrawを発射すること

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

注意してください。ここで

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

まず、layout: 'horizontal'を試してみましたか？凡例の項目のリストをパーツに分割し、かなり素敵なページネーションを示し、比較的小さなスペースに存在します。

もしそうでなければ、私はAPIドキュメントを掘り下げる以外の選択肢がないというチャートの伝説を管理すると考えています。多くのオプションがある場合は、API referenceを参照すると、チャートに定義できます。たとえば、legend.lineHeightまたはlegend.marginなど、凡例コンテナのサイズ変更に役立つものがあります。

legend.update()という新しいメソッドをオブジェクトに渡して、必要に応じて凡例を更新することもできます。

したがって、コンテナ/ウィンドウのサイズを追跡し、必要なパラメータでそれを更新するのが得策です。 ChartJSで作られたチャートがhere