HighCharts -如何设置动态边距?

Question

我想把我的highcharts图表放入我的bootstrap网格中，这样它就可以很好地与其他内容匹配。

整体应该是这样的:

<表类> tbody><<tr>Col-1Col-10Col-1x轴标签图表标绘区轴标签Col-1Col-10Col-1

您可以根据一些百分比值动态计算和设置页边距，例如:

chart: {
...,
events: {
render: function() {
if (allowChartUpdate) {
var dynamicMargin = this.chartWidth * 8.333333 / 100;
allowChartUpdate = false;
this.update({
chart: {
marginLeft: dynamicMargin,
marginRight: dynamicMargin
}
}, true, true, false);
allowChartUpdate = true;
}
}
}
}

---

现场演示:https://jsfiddle.net/BlackLabel/913scgxa/

API参考:https://api.highcharts.com/highcharts/chart.events.render

与其尝试将图表的元素分离到不同的列中，不如使用CSS(假设固定宽度的图表轴/.col-1)实现相同的视觉效果:https://jsfiddle.net/7z93n1md/1/

Highcharts.chart('container', {
chart: {
type: "column",
marginLeft: 65 // <= Dynamically or percent?
},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: null
}
},
legend: {
align: 'right',
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});

.container-fluid .col-1,
.container-fluid .col-10{
border-right: 1px solid blue;
height: 100%;
}
.highcharts-figure {
min-width: 100%;
width: 100%,
}
/* Added the below */
.row .col-1 {
flex: 0 0 65px;
max-width: 65px;
}
.row .col-10 {
flex: 0 0 calc(100% - 130px);
max-width: calc(100% - 130px);
padding: 0;
}
.row .col-12 {
flex: 0 0 calc(100% - 65px);
max-width: calc(100% - 65px);
padding: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-1">Col-1</div>
<div class="col-10">Col-10</div>
<div class="col-1">Col-1</div>
</div>
<div class="row">
<div class="col-12">
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
</div>
</div>