Google图表：隐藏图表而不丢失vAxis注释

Crpmt 发表于 Dev

转速

当我在页面上创建2个图表时，我得到了理想的结果，当我尝试在页面加载时隐藏其中一个图表并单击显示它时，vAxis的注释会消失。

我在样式表和内联显示中尝试了jQuery，CSS和内联显示：无，样式=“ display：none”，它始终会丢失vAxis的注释。我试图指定vAxis格式：选项中的“ currency”，没有任何帮助。

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

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

向下滚动JavaScript窗口一直到底部找到该行，它使注释消失。idk为什么。单击“ Woche”，德语为“ week”。

我想在两个图表上都有注释。如果您注释掉.hide（）并重新加载页面，则将显示注释，但是当我.hide（）#chart_week时，注释将消失。

对不起怪物小提琴:(

谢谢你的时间

白帽

在隐藏容器中绘制图表时，会发生这种情况。
隐藏容器时，
图表将无法正确计算图表元素的大小。

解决方案是
在绘制图表之前等到容器显示出来。

请参阅以下工作片段...

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。