Проблема с svg в html tributes и временной шкале диаграмм google - невозможно изменить ширину диаграммы

У меня есть такая же диаграмма, как и в других местах моего проекта, и я ничего не менял.

Проблема, которую я получаю, заключается в том, что независимо от того, что я делаю, размер по горизонтали не меняется ...

obs - Обе представленные диаграммы находятся на одной странице, но используют уникальные идентификаторы и находятся в разных блоках div.

obs- Я уже пытался удалить рабочий график, но ничего не изменилось.

я получаю этот макет:

[Проблема с svg в html tributes и временной шкале диаграмм google - невозможно изменить ширину диаграммы

Когда я должен это получить (уже пробовал с тем же точным кодом)

Проблема с svg в html tributes и временной шкале диаграмм google - невозможно изменить ширину диаграммы

Используя инспектор, я получаю эту информацию:

Проблема с svg в html tributes и временной шкале диаграмм google - невозможно изменить ширину диаграммы

Я использую следующий код:

    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');

    });
});

Какие еще правила стилизации применяются? Насколько широк container?

Double M 25.10.2018 19:28

Хорошо, в инспекторе вы можете проверить, что размер контейнера превышает 400 пикселей? Попробуйте добавить это правило CSS: #example3a > svg { width: 100% } и переименуйте идентификатор в example3a - некоторые правила могут применяться неправильно, поскольку . обозначает селектор классов в CSS.

Double M 25.10.2018 20:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
317
1

Ответы 1

в коде, предложенном @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();

Теперь работают вкладки начальной загрузки!

Другие вопросы по теме