Google Chart: числа по оси Y не видны - PullRequest
Новая
       5

Google Chart: числа по оси Y не видны

1 голос
/ 18 марта 2020

У меня есть простой график Google, который показывает данные о погоде в виде комбинированной диаграммы. https://jsfiddle.net/Typwithname/ubkn92m5/49/ Код: HTML: 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <ul class="citytabs">
      <li data-foreswf-target="#hourly" class="active5 citytab">Pls Click</li>
      <li data-foreswf-target="#Diagrammtab" class="citytab">Pls Click Me 2</li>

    </ul>       
    <div data-foreswf-content id="hourly" class="acitve5">
       <p>hello1</p>
    </div>
    <div data-foreswf-content id="Diagrammtab" class="Chart">
    <p>
    hello2
    </p>
      <div id="Diagramm"></div>
    </div>

CSS: 

[data-foreswf-content] {
  display: none;
}

.active5[data-foreswf-content] {
  display: block;
}

Javascript: 

  google.charts.load('current', {
    packages: ['corechart']
  });

  google.charts.setOnLoadCallback(drawVisualization);
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
      ['Time', 'Temperature', 'PrecipProbability'],
      ['1', 2, 6],
      ['2', 5, 8]
    ]

  );
  var options = {
    title: 'Weather Hourly',
    'width': 550,
    'height': 230,
    seriesType: 'bars',
    colors: ['#f7fa3c', '#3366CC'],
    vAxis: {title: 'Stuff'},
    hAxis: {title: 'Day'},
  };

  var chart = new google.visualization.ComboChart(document.getElementById('Diagramm'));
  chart.draw(data, options);
}
//Code for Forecast-tab swf
const foreswf = document.querySelectorAll('[data-foreswf-target]')
const foreswfcontent = document.querySelectorAll('[data-foreswf-content]')
foreswf.forEach(city => {
  city.addEventListener('click', () => {
    const target = document.querySelector(city.dataset.foreswfTarget)
    foreswfcontent.forEach(swfContent => {
      swfContent.classList.remove('active5')
    })
    foreswf.forEach(swf => {
      swf.classList.remove('active5')
    })
    city.classList.add('active5')
    target.classList.add('active5')
  })
})

Я использую вкладки, чтобы скрыть и показать этот график. Моя проблема сейчас в том, что если я попытаюсь показать график, числа по оси Y исчезают. Если я не использую все скрывающие и показывающие вещи, все работает просто отлично. Вы можете попробовать это, если просто удалите css -часть.

Так что мой вопрос: как я могу сделать видимыми числа по оси Y, не отбрасывая механизмы скрытия и показа c?

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 19 марта 2020

, когда диаграмма нарисована в скрытом контейнере,
не может правильно рассчитать размещение всех элементов диаграммы.

Вместо этого дождитесь отображения контейнера, прежде чем рисовать диаграмму.

см. Следующий рабочий фрагмент ... 

window.addEventListener("load", () => {
  google.charts.load('current', {
    packages: ['corechart']
  });

  google.charts.setOnLoadCallback(drawVisualization);
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
      ['Time', 'Temperature', 'PrecipProbability'],
      ['1', 2, 6],
      ['2', 5, 8]
    ]

  );
  var options = {
    title: 'Weather Hourly',
    'width': 550,
    'height': 230,
    seriesType: 'bars',
    colors: ['#f7fa3c', '#3366CC'],
    vAxis: {title: 'Stuff'},
    hAxis: {title: 'Day'},
  };
  var chart = new google.visualization.ComboChart(document.getElementById('Diagramm'));

  //Code for Forecast-tab swf
  const foreswf = document.querySelectorAll('[data-foreswf-target]')
  const foreswfcontent = document.querySelectorAll('[data-foreswf-content]')
  foreswf.forEach(city => {
    city.addEventListener('click', () => {
      const target = document.querySelector(city.dataset.foreswfTarget);
      foreswfcontent.forEach(swfContent => {
        swfContent.classList.remove('active5');
      })
      foreswf.forEach(swf => {
        swf.classList.remove('active5');
      })
      city.classList.add('active5');
      target.classList.add('active5');
      
      switch (target.id) {
        case 'Diagrammtab':
          chart.draw(data, options);
        	break;
      }
    });
  });
}
[data-foreswf-content] {
  display: none;
}

.active5[data-foreswf-content] {
  display: block;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <ul class="citytabs">
      <li data-foreswf-target="#hourly" class="active5 citytab">Pls Click</li>
      <li data-foreswf-target="#Diagrammtab" class="citytab">Pls Click Me 2</li>

    </ul>       
    <div data-foreswf-content id="hourly" class="acitve5">
       <p>hello1</p>
    </div>
    <div data-foreswf-content id="Diagrammtab" class="Chart">
    <p>
    hello2
    </p>
      <div id="Diagramm"></div>
    </div>
...