Highcharts，动态设置图例高度

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到半图表的高度：

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

注意update功能火灾redraw内本身。为了防止无限递归调用我用控制radrawing全局变量：

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