Google Charts: скрыть график без потери аннотации vAxis - PullRequest
Новая
       13

Google Charts: скрыть график без потери аннотации vAxis

1 голос
/ 10 мая 2019

Когда я создаю 2 диаграммы на своей странице, я получаю отличные результаты, когда я пытаюсь скрыть одну из диаграмм при загрузке страницы и показать ее по клику, аннотация vAxis исчезает.

Я пробовал jQuery, CSS в таблице стилей и на встроенном дисплее: нет, style = "display: none", он всегда теряет аннотацию vAxis. Я попытался указать формат vAxis: «валюта» в настройках, ничего не помогает.

https://jsfiddle.net/crapomat/xguo8yfn/2/

      $('#chart_week').hide();

Прокрутите окно JavaScript до конца, чтобы найти строку, и аннотация исчезнет. ИДК почему. Нажмите на «Woche», что в переводе с немецкого означает «неделя».

Я хочу, чтобы аннотации были на обеих диаграммах. Если вы закомментируете страницу .hide () и перезагружаете страницу, появляются аннотации, но они исчезают, когда я .hide () #chart_week.

Извините за скрипку монстра: (

спасибо за ваше время

1 Ответ

0 голосов
/ 11 мая 2019

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

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

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

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

function drawIntraday() {
  var data = google.visualization.arrayToDataTable([
    ['time', 'ask', 'bid'],
    [new Date(2019,4,10,08,01), 19.045000, 19.005000], [new Date(2019,4,10,08,04), 19.045000, 19.005000],
    [new Date(2019,4,10,08,07), 19.045000, 19.005000], [new Date(2019,4,10,08,10), 19.045000, 19.005000],
    [new Date(2019,4,10,08,13), 19.045000, 19.005000], [new Date(2019,4,10,08,16), 19.045000, 19.005000],
    [new Date(2019,4,10,08,19), 19.045000, 19.005000], [new Date(2019,4,10,08,22), 19.045000, 19.005000],
    [new Date(2019,4,10,08,25), 19.045000, 19.005000], [new Date(2019,4,10,08,28), 19.045000, 19.005000],
    [new Date(2019,4,10,08,31), 19.050000, 19.005000], [new Date(2019,4,10,08,34), 19.050000, 19.015000],
    [new Date(2019,4,10,08,37), 19.050000, 19.015000], [new Date(2019,4,10,08,40), 19.050000, 19.015000],
    [new Date(2019,4,10,08,43), 19.050000, 19.015000], [new Date(2019,4,10,08,46), 19.025000, 19.015000],
    [new Date(2019,4,10,08,49), 19.050000, 19.015000], [new Date(2019,4,10,08,52), 19.050000, 19.015000],
    [new Date(2019,4,10,08,55), 19.095000, 19.015000], [new Date(2019,4,10,08,58), 19.095000, 19.005000],
  ]);

  var date_formatter = new google.visualization.DateFormat({
    pattern: "dd.MM.yyyy HH:mm"
  });

  date_formatter.format(data, 0);

  var options = {
    width: 360,
    height: 400,
    curveType: 'function',
    legend: 'none',
    hAxis: {
      format: 'HH:mm',
      gridlines: {count: 3}
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_intraday'));
  chart.draw(data, options);
}

function drawWeek() {
  var data = google.visualization.arrayToDataTable([
    ['time', 'ask', 'bid'],
    [new Date(2019,4,06,08,02), 21.140000, 21.080000], [new Date(2019,4,06,08,04), 21.140000, 21.080000],
    [new Date(2019,4,06,08,07), 20.850000, 20.750000], [new Date(2019,4,06,08,10), 20.850000, 20.750000],
    [new Date(2019,4,06,08,13), 20.900000, 20.810000], [new Date(2019,4,06,08,16), 20.850000, 20.760000],
    [new Date(2019,4,06,08,19), 20.850000, 20.760000], [new Date(2019,4,06,08,22), 20.850000, 20.780000],
    [new Date(2019,4,06,08,25), 20.850000, 20.780000], [new Date(2019,4,06,08,28), 20.850000, 20.780000],
    [new Date(2019,4,06,08,31), 20.760000, 20.750000], [new Date(2019,4,06,08,34), 20.770000, 20.750000],
    [new Date(2019,4,06,08,37), 20.770000, 20.720000], [new Date(2019,4,06,08,40), 20.770000, 20.710000],
  ]);

  var date_formatter = new google.visualization.DateFormat({
    pattern: "dd.MM.yyyy HH:mm"
  });

  date_formatter.format(data, 0);
  var options = {
    width: 360,
    height: 400,
    curveType: 'function',
    legend: 'none',
    hAxis: {
      format: 'dd.MM.yyyy',
      gridlines: {count: 3}
    },
    vAxis: {
      format: 'currency'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_week'));
  chart.draw(data, options);
}

$('#aintra').click(function (e) {
  e.preventDefault();
  $('#chart_week').hide();
  $('#chart_intraday').show();
});

$('#aweek').click(function (e) {
  e.preventDefault();
  $('#chart_intraday').hide();
  $('#chart_week').show();
  drawWeek();
});
#chartmenu nav ul li { cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chartmenu">
  <nav>
    <ul>
      <li><a id="aintra"  class="chartlink">Intraday</a></li>
      <li><a id="aweek"   class="chartlink">Woche</a></li>
      <li><a id="amonth"  class="chartlink">Monat</a></li>
      <li><a id="a3month" class="chartlink">3 Monate</a></li>
      <li><a id="a6month" class="chartlink">6 Monate</a></li>
      <li><a id="a1year"  class="chartlink">Jahr</a></li>
      <li><a id="a3year"  class="chartlink">3 Jahre</a></li>
      <li><a id="a10year" class="chartlink">10 Jahre</a></li>
      <li><a id="amax"    class="chartlink">Max</a></li>
    </ul>
  </nav>
</div>

<div id="charts">
  <div id="intra"><div id="chart_intraday"></div></div>
  <div id="week"><div id="chart_week"></div></div>
  <div id="month"></div>
  <div id="threemonth"></div>
  <div id="sixmonth"></div>
  <div id="oneyear"></div>
  <div id="threeyears"></div>
  <div id="tenyears"></div>
</div>

полная скрипка со всеми данными ...

https://jsfiddle.net/rgm8yhuk/

...