У меня есть такая же диаграмма, как и в других местах моего проекта, и я ничего не менял.
Проблема, которую я получаю, заключается в том, что независимо от того, что я делаю, размер по горизонтали не меняется ...
obs - Обе представленные диаграммы находятся на одной странице, но используют уникальные идентификаторы и находятся в разных блоках div.
obs- Я уже пытался удалить рабочий график, но ничего не изменилось.
я получаю этот макет:
[
Когда я должен это получить (уже пробовал с тем же точным кодом)
Используя инспектор, я получаю эту информацию:
Я использую следующий код:
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');
});
});
Хорошо, в инспекторе вы можете проверить, что размер контейнера превышает 400 пикселей? Попробуйте добавить это правило CSS: #example3a > svg { width: 100% }
и переименуйте идентификатор в example3a
- некоторые правила могут применяться неправильно, поскольку .
обозначает селектор классов в CSS.
в коде, предложенном @whitehat, возникла проблема. Я не знаю, была ли проблема моей или в предложении, но мне удалось ее решить. Функция изменения размера не работала, потому что вызывала неправильные диаграммы. Имена были нестандартными, и из-за этого он не работал.
где исправленный код:
google.charts.load('current', {
packages:['timeline']
}).then(function () {
// bootstrap tabs
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
// 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'));
drawChart1();
drawChart2();
});
window.addEventListener('resize', drawChart);
function drawChart() {
switch ($(e.target).html()) {
case 'Vista por Fracções':
drawChart1();
break;
case 'Vista por Contrato':
drawChart2();
break;
}
}
// code for chart 1
var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
var data1 = new google.visualization.DataTable();
data1.addColumn({ type: 'string', id: 'fracao' });
data1.addColumn({ type: 'string', id: 'contrato' });
data1.addColumn({ type: 'date', id: 'Start' });
data1.addColumn({ type: 'date', id: 'End' });
data1.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)],
]);
var options1 = {
chartArea: {
left: 40,
width: '100%'
},
timeline: {
groupByRowLabel: true,
singleColor: 'green' ,
showRowLabels: true },
width: '100%',
height: '400',
};
// code for chart 2
var chart2 = new google.visualization.Timeline(document.getElementById('chart_div'));
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'NCONT');
data2.addColumn('string', 'Contrato');
data2.addColumn('date', 'Season Start Date');
data2.addColumn('date', 'Season End Date');
data2.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 options2 = {
height: 300,
timeline: {
groupByRowLabel: false,
singleColor: 'orange' ,
showRowLabels: false }
};
function drawChart1() {
chart1.draw(data1, options1);
}
function drawChart2() {
chart2.draw(data2, options2);
}
// draw chart on initial tab
drawChart2();
Теперь работают вкладки начальной загрузки!
Какие еще правила стилизации применяются? Насколько широк
container
?