Highcharts，动态设置图例高度

Question

我想动态设置图例的高度，所以当容器调整大小时，图例高度会自动调整。 理想情况下，图例的高度应该是图表容器高度的一半。

小提琴： https://jsfiddle.net/rredondo/awac1dw8/

请注意，随着容器变小，图表的绘图区域也会变小，直到消失，因为图例占用了空间。这是我要避免的行为。 另外，我尝试将maxHeight 设置为某个数字。这种方法的问题是它不是动态的，如果值太小会浪费很多空间。

图例选项是：

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

布局必须设置为垂直，图例必须位于图表下方。

Answer 1

首先，您是否尝试过使用 layout: 'horizontal' ？它将图例中的项目列表分成几部分，显示非常整洁的分页并且位于相对较小的空间中。

如果没有，我相信要管理图表图例，除了深入研究 API 文档之外别无选择。如果您查看 API reference 提供的大量选项，您可以为图表定义。例如legend.lineHeight 或legend.margin 以及其他可以帮助调整图例容器大小的方法。

还有一个方法legend.update()，您可以在其中传递一个带有新选项的对象，以便在需要时更新您的图例。

因此，诀窍是跟踪容器/窗口的大小并使用所需参数对其进行更新。使用 ChartJS 制作图表的类似方式调整大小here

Answer 2

这是一个在每次重绘图表时使用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) {
        	// 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>