У меня есть такой же тип диаграммы, используемый в других местах в моем проекте, и я ничего не изменил.
Проблема, которую я получаю, заключается в том, что независимо от того, что я делаю, размер по горизонтали не изменяется...
obs- Обе представленные диаграммы находятся на одной и той же странице, но используют уникальные идентификаторы и находятся в разных элементах div.
obs- Я уже пытался удалить работающую диаграмму, но ничего не изменилось.
Я получаю этот макет:
[
Когда я должен получить это (уже пробовал с тем же точным кодом)
Использование инспектора Я получаю эту информацию:
Код IЯ использую это:
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['AA AGUIAR - 1', new Date(2019, 0, 01), new Date(2025, 0, 01)],['AA AGUIAR - 1', new Date(2009, 0, 01), new Date(2016, 7, 18)],['Torre 1 - 145', new Date(2019, 0, 01), new Date(2025, 0, 01)],['Torre 2 - 1A', new Date(2019, 0, 26), new Date(2025, 0, 01)],]);
chart.draw(dataTable);
}
с этим div, чтобы представить его:
<div id="example3.1" style="height: 200px;">
ОБНОВЛЕНИЕ:
По предложению WhiteHat я обновил свой код!Похоже, что WhiteHat прав!проблема во вкладках, и я попытался обновить свой код до этого (еще раз предложение WhiteHat), и он все еще не работает!
Я попытался изменить вкладку по умолчанию при загрузке страницы, и диаграмма отлично загрузилась ... Обновленный код (не работает):
google.charts.load('current', {
packages:['timeline']
}).then(function () {
// listen for tab shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// determine which tab is visible based on tab text
window.dispatchEvent(new Event('resize'));
switch ($(e.target).html()) {
case 'Vista por Contrato':
drawChart1();
break;
case 'Vista por Fracções':
drawChart2();
break;
}
});
function drawChart1() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['AA AGUIAR - 1', new Date(2019, 0, 01), new Date(2025, 0, 01)],['AA AGUIAR - 1', new Date(2009, 0, 01), new Date(2016, 7, 18)],['Torre 1 - 145', new Date(2019, 0, 01), new Date(2025, 0, 01)],['Torre 2 - 1A', new Date(2019, 0, 26), new Date(2025, 0, 01)],?>
]);
chart.draw(dataTable);
}
function drawChart2() {
// code for chart 2
var data = new google.visualization.DataTable();
data.addColumn('string', 'Contrato');
data.addColumn('date', 'Season Start Date');
data.addColumn('date', 'Season End Date');
data.addRows([
['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['Teste', new Date(2009, 0, 01), new Date(2016, 7, 18)],['drwerwer', new Date(2018, 9, 25), new Date(2019, 11, 31)],['Teste', new Date(2009, 0, 01), new Date(2016, 7, 18)],['WBOX LDA', new Date(2019, 0, 01), new Date(2025, 0, 01)],]);
var options = {
height: 450,
timeline: {
groupByRowLabel: false
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
// draw chart on initial tab
drawChart2();
});
Это код, который я имею для своих вкладок(поскольку это выглядит, проблема начинается здесь!).
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item"><a data-toggle="tab" href="#fraccoes">Vista por Fracções</a></li>
<li class="active"><a data-toggle="tab" href="#contratos">Vista por Contrato</a></li>
<li class="nav-item"><a data-toggle="tab" href="#notificacoes">Notificações</a></li>
</ul>
и это код для моих вкладок начальной загрузки:
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});