Полноэкранная загрузочная карта с высокими чартами (высота 100%)
У меня есть несколько (загрузочных) карт, на которых я хотел бы иметь возможность показать этот полноэкранный режим. В этих картах присутствуют чарты Highcharts. Проблема в том, что высота старших графиков не адаптируется, когда вы идете в полноэкранном режиме.
Некоторое время назад я задал тот же вопрос с панелями начальной загрузки, а затем "daniel_s" сделал этот пример для панелей. Только сейчас я добавил несколько столбцов внизу, и они были преобразованы из панелей в карты. К сожалению, пример больше не работает.
Есть ли возможность автоматически настроить масштабирование старших графиков так, чтобы соотношение (столбцы внизу и заголовок) оставалось таким же, как в этом примере?
Кроме того, мне также хотелось бы узнать, как получить заголовок текста и иконки в одну строку. Так что текст слева, а значки справа.
HTML
$(document).ready(function() {
var charts = [];
var chart1Info = {
containerId: 'container',
definition: {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
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]
}]
}
};
var chart2Info = {
containerId: 'container2',
definition: {
title: {
text: 'Chart2 Title'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
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]
}]
}
};
function drawChart(chartInfo) {
// Properties that vary by chart should be defined in chartInfo
// Any properties that are the same for all charts are added here
chartInfo.responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
};
if (chartInfo == chart1Info) {
charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
} else {
charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
e.preventDefault();
var $this = $(this);
$this.children('i')
.toggleClass('fa-expand')
.toggleClass('fa-arrows-alt');
console.log($(this).closest('.card'))
$(this).closest('.card').toggleClass('panel-fullscreen');
var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
console.log($this.id, chartInfo);
drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
// Export buttons
$('#png').click(function() {
charts[0].exportChart();
});
$('#jpeg').click(function() {
charts[0].exportChart({
type: 'jpeg',
filename: 'my-pdf'
});
});
$('#pdf').click(function() {
charts[0].exportChart({
type: 'pdf',
filename: 'my-pdf'
});
});
$('#svg').click(function() {
charts[0].exportChart({
type: 'SVG',
filename: 'my-svg'
});
});
document.getElementById('csv').onclick = () => {
charts[0].downloadCSV()
};
document.getElementById('xls').onclick = () => {
charts[0].downloadXLS()
}
$('#print').click(function() {
charts[0].print();
});
$('#png2').click(function() {
charts[1].exportChart();
});
$('#jpeg2').click(function() {
charts[1].exportChart({
type: 'jpeg',
filename: 'my-pdf'
});
});
$('#pdf2').click(function() {
charts[1].exportChart({
type: 'pdf',
filename: 'my-pdf'
});
});
$('#svg2').click(function() {
charts[1].exportChart({
type: 'SVG',
filename: 'my-svg'
});
});
document.getElementById('csv2').onclick = () => {
charts[1].downloadCSV()
};
document.getElementById('xls2').onclick = () => {
charts[1].downloadXLS()
}
$('#print2').click(function() {
charts[1].print();
});
});.panel-actions {
margin-top: -20px;
margin-bottom: 0;
text-align: right;
}
.panel-actions a {
color: #333;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed !important;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.card_border {
border: solid 0.75px #fa7921;
}
.card_border2 {
border: solid 2px #fa7921;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921);">
<h3>Panel title
<ul class="list-inline panel-actions float-right">
<li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-list-ul"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#" id="print">Print</a></li>
<li role="separator" class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#" id="png">Download PNG</a></li>
<li class="dropdown-item"><a href="#" id="jpeg">Download JPEG</a></li>
<li class="dropdown-item"><a href="#" id="pdf">Download PDF</a></li>
<li class="dropdown-item"><a href="#" id="svg">Download SVG</a></li>
<li role="separator" class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#" id="csv">Download CSV</a></li>
<li class="dropdown-item"><a href="#" id="xls">Download XLS</a></li>
</ul>
</div>
</ul>
</h3>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2">
<div id="container"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> Saves
<p class="h4">1700000</p>
<p class="text-danger margin h6">-2.1%</p>
</div>
<div class="col-sm text-center card_border2">
<br> Likes
<h4>1700000</h4>
<p class="text-success margin">2.1%</p>
</div>
<div class="col-sm text-center card_border2">
<br> Likes
<h4>1700000</h4>
<p class="text-success margin">2.1%</p>
</div>
<div class="col-sm text-center card_border2">
<br> Likes
<h4>1700000</h4>
<p class="text-success margin">2.1%</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921);">
<h3>Panel title
<ul class="list-inline panel-actions float-right">
<li class="list-inline-item"><a href="#" id="panel-fullscreen2" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-list-ul"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#" id="print2">Print</a></li>
<li role="separator" class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#" id="png2">Download PNG</a></li>
<li class="dropdown-item"><a href="#" id="jpeg2">Download JPEG</a></li>
<li class="dropdown-item"><a href="#" id="pdf2">Download PDF</a></li>
<li class="dropdown-item"><a href="#" id="svg2">Download SVG</a></li>
<li role="separator" class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#" id="csv2">Download CSV</a></li>
<li class="dropdown-item"><a href="#" id="xls2">Download XLS</a></li>
</ul>
</div>
</ul>
</h3>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2">
<div id="container2"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> Saves
<p class="h4">1700000</p>
<p class="text-danger margin h6">-2.1%</p>
</div>
<div class="col-sm text-center card_border2">
<br> Likes
<h4>1700000</h4>
<p class="text-success margin">2.1%</p>
</div>
<div class="col-sm text-center card_border2">
<br> Likes
<h4>1700000</h4>
<p class="text-success margin">2.1%</p>
</div>
<div class="col-sm text-center card_border2">
<br> Likes
<h4>1700000</h4>
<p class="text-success margin">2.1%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Надеюсь, кто-то может помочь мне решить эту проблему. Заранее спасибо!!
1 ответ
Давайте начнем с более простого вопроса, а именно:
Кроме того, мне также хотелось бы узнать, как получить заголовок текста и иконки в одну строку. Так что текст слева, а значки справа.
Ваш плавающий не работает, потому что гибкий контейнер не поддерживает float свойство, поэтому, чтобы расположить его так, как вы хотите, установите justify-content: space-between на родительском элементе.
Что касается вопроса с высотой, пожалуйста, попробуйте установить chart.height: '100%' в вашем объекте конфигурации диаграммы, и дайте мне знать, что это решило проблему.
<div class="container-fluid">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel title</h3>
<ul class="list-inline panel-actions">
<li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-list-ul"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#" id="print">Print</a></li>
<li role="separator" class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#" id="png">Download PNG</a></li>
<li class="dropdown-item"><a href="#" id="jpeg">Download JPEG</a></li>
<li class="dropdown-item"><a href="#" id="pdf">Download PDF</a></li>
<li class="dropdown-item"><a href="#" id="svg">Download SVG</a></li>
<li role="separator" class="divider dropdown-item"></li>
<li class="dropdown-item"><a href="#" id="csv">Download CSV</a></li>
<li class="dropdown-item"><a href="#" id="xls">Download XLS</a></li>
</ul>
</div>
</ul>
</div>
</div>
Конфигурация диаграммы:
var chart1Info = {
containerId: 'container',
definition: {
chart: {
height: '100%'
},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
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]
}]
}
};
Живой пример: http://jsfiddle.net/hnLr14o5/
[РЕДАКТИРОВАТЬ]
После разговора в комментариях ниже, вам нужно установить оба контейнера height значение атрибута равно 100%, затем удалите это свойство из ваших конфигураций диаграмм. Также, пожалуйста, удалите style="height: 220px" атрибут из обоих .card-body элементы, а вместо этого - определить новый класс с именем (например) .row-200 который устанавливает height в 200pxи назначьте его изначально этим двум элементам.
Наконец, вы можете переключать созданный класс на событие нажатия кнопки с помощью этой строки кода:
$($(this).parents()[3]).find('.card-body').toggleClass('row-200')
Вот пример: http://jsfiddle.net/kdv3sy85/
С уважением!