时间戳

首页 > 解决方案 > highcharts 图表高度与图例不同

highcharts - highcharts 图表高度与图例不同

问题描述

我想创建固定高度的图表，根据用户交互，一些图表可以是空的，所以没有图例。

我的问题是我希望它们都具有相同的高度，然后，如果图表上方有图例，则该高度应增加图例。

拿不到，我试试

options = {
  chart: {
    zoomType: 'x',
    height: 300
  },
  legend: {
     enabled: 'true',
     align: 'center',
     verticalAlign: 'bottom',
     layout: 'horizontal',
     maxHeight: 50
  }
};

结果，我所拥有的是，如果有图例，则为 250 像素图表，如果不是 300 像素图表。我想要的总是一个 300px 的图表，如果是图例，则要多 50px 来包含它。

我该如何解决？

标签： highcharts

解决方案

在图表load事件中，您可以使用chart.setSize通过图例高度增加图表高度的方法。

function addLegendHeight(chart) {
    var legendSpace = chart.legend.legendHeight -
        chart.legend.padding;

    if (legendSpace) {
        chart.setSize(null, chart.chartHeight + legendSpace);
    }
}

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            load: function() {
                addLegendHeight(this);
            }
        }
    },
    ...
});

现场演示：http: //jsfiddle.net/BlackLabel/seqah1by/

API 参考：https ://api.highcharts.com/class-reference/Highcharts.Chart#setSize

推荐阅读