1
В принципе, у меня есть контейнер, разделенный на col-xs-3, col-xs-7 (который содержит график) и col-xs-2, а также три таблицы внизу с одинаковыми классами начальной загрузки (col-xs- 3, ...). На контейнере у меня есть график, созданный с помощью высоких диаграмм, и я хочу, чтобы он был выровнен с таблицей внизу (как показано фиолетовыми стрелками), именно это я хочу в результате, а также реагирую на изменение ширины окна: 
Как я могу получить отзывчивый график с помощью высоких диаграмм?
Сейчас у меня есть это так:
Я уже попробовал некоторые approches как перемещение графика влево, масштабировать график на различных запросов СМИ, но они просто работают на какой-то определенной ширины.
Highcharts.chart('container', {
chart: {
renderTo: ''
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
labels: {
rotation: -45,
enabled: false
},
//maxZoom: 24 * 3600 * 1000 * 30, // fourteen days
title: {
//text: 'sample'
}
},
yAxis: {
min: 0,
max: 150,
tickInterval: 50,
gridLineWidth: 0,
lineWidth: 4,
plotLines: [{
color: '#ccc',
dashStyle: 'dash',
width: 2,
value: 100
}],
title: {
text: ''
},
labels: {
style: {
color: '#ccc'
},
formatter: function() {
if ('100' == this.value) {
return '<span style="fill: #000;">' + this.value + ' %</span>';
} else {
return this.value + ' %';
}
}
}
},
tooltip: {
shared: true,
formatter: function() {
var result = '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b>';
$.each(this.points, function (i, datum) {
result += '<br />' + Math.round(datum.y) + ' %';
});
return result;
}
},
legend: {
enabled: false,
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
series: [{
name: '',
data: [[0, 50.57],
[10, 50.63],
[20, 75.14],
[30, 100.08],
[40, 40.28],
[130, 68.25],
[140, 125.01], ],
lineWidth: 5,
threshold: 99,
step: 'center',
tooltip: {
valueDecimals: 2
}
}]
});.empty {
background-color: #f3f3f3;
height: 250px;
}
.row {
margin: 10px 0;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 empty"></div>
<div class="col-xs-7" style="">
<div id="container" style="height: 250px; width: 100%"></div>
</div>
<div class="col-xs-2 empty"></div>
</div>
<div class="row">
<div class="col-xs-3 empty"></div>
<div class="col-xs-7" style="">
<div id=""></div>
</div>
<div class="col-xs-2 empty"></div>
</div>
</div>