高图图表高度(图例除外)

库库鲁

我想创建高度固定的图表,具体取决于用户交互,某些图表可以为空,因此没有图例。

我的问题是我希望所有这些对象都具有相同的高度,然后,如果图表上方有图例,则应通过图例增加此高度。

我不明白,这是我的尝试。

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

结果,如果有图例,我拥有的是250px的图表,如果不是300px的图表。我想要的始终是300px的图表,如果是图例,则还要包含50px。

我该如何解决?

pot

在图表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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章