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。为了防止无限递归调用，我使用了控制拉伸的全局变量：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，您是否尝试使用layout: 'horizontal'？它将图例中的项目列表分成几部分，显示相当整齐的分页并驻留在相对较小的空间中。

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

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

所以诀窍是跟踪容器/窗口的大小并用想要的参数更新它。使用ChartJS制作的图表的方式与here

的大小相同

Highcharts，动态设置图例高度

2 个答案: