我想创建高度固定的图表,具体取决于用户交互,某些图表可以为空,因此没有图例。
我的问题是我希望所有这些对象都具有相同的高度,然后,如果图表上方有图例,则应通过图例增加此高度。
我不明白,这是我的尝试。
options = {
chart: {
zoomType: 'x',
height: 300
},
legend: {
enabled: 'true',
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
maxHeight: 50
}
};
结果,如果有图例,我拥有的是250px的图表,如果不是300px的图表。我想要的始终是300px的图表,如果是图例,则还要包含50px。
我该如何解决?
在图表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] 删除。
我来说两句