Почему ширина диаграмм Google не работает при смене отображения с нуля на блокировку?

Question

Я создаю диаграммы Google с шириной = 100%:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["test", "val", { role: "style" } ],
    ["test", 21.45, "color: red"]
  ]);
  var options = {
          height: '300px',
          width: '100%'
          };
  var view = new google.visualization.DataView(data);
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view,options);
  }
</script>
<div id="columnchart_values"></div>

Затем я создаю те же графики с отображением = нет начала.и показывает график после клика:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
  ["test", "val", { role: "style" } ],
  ["test", 21.45, "color: red"]
    ]);
    var options = {
          width: '100%'
          };
    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
    chart.draw(view,options);
    }
  function test() {
  document.getElementById("columnchart").style.display = "block";
  }
</script>
<div onclick="javascript:test()"> click me </div>
<div id="columnchart" style="width: 100%; height: 300px; display:none;"></div>

Но во втором методе кажется, что стиль ширины Google-диаграмм не работает и показывает только ширину по умолчанию.Может кто-нибудь мне поможет?Большое спасибо!

Answer 1

Перерисовать график с параметрами после замены display на блокировку;

Сделайте то же самое для события window resize, если хотите.

"use strict";
console.clear();

{
  let data, options, view, chart;
  
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ["test", "val", {
        role: "style"
      }],
      ["test", 21.45, "color: red"]
    ]);
    options = {
      width: '100%'
    };
    view = new google.visualization.DataView(data);
    chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
    chart.draw(view, options);
  }

  function test() {
    document.getElementById("columnchart").style.display = "block";
    chart.draw(view, options);
  }
  
  document.getElementById('open-chart').addEventListener('click', test);
  window.addEventListener('resize', test)
}

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

<div id="open-chart" onclick="test()"> click me </div>
<div id="columnchart" style="width: 100%; height: 300px; display:none;"></div>

Answer 2

JavaScript не может вычислить ширину, пока блок имеет display: none;

Так как скрипт не может вычислить ширину, он принимает значение по умолчанию 400px width.

Чтобы устранить эту проблему, у вас естьнесколько вариантов:

1) не использовать display: none, но использовать: opacity: 0 или visibility: hidden

2) нарисовать диаграмму, когда блок станет видимым (display: block),так что вычисления будут возможны.

Если вы вызываете Draw Graph непосредственно перед отображением элемента, то он работает хорошо.Это потому, что граф фактически рисуется, когда блок уже имеет display: block, поскольку граф рисуется асинхронно, с использованием обратного вызова.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function drawGraph() {

  google.charts.load("current", {packages:['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
  ["test", "val", { role: "style" } ],
  ["test", 21.45, "color: red"]
    ]);
    var options = {
          width: '100%'
          };
    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
    chart.draw(view,options);
    }
}
  function test() {
  drawGraph();
  document.getElementById("columnchart").style.display = "block";
  }
</script>
<div onclick="javascript:test()"> click me </div>
<div id="columnchart" style="width: 100%; height: 300px; display:none;"></div>

Answer 3

Ширина вашего div #columnchart равна 100%, т. Е. Полная область просмотра, но, как вы можете видеть, график не имеет полной ширины, т.е. потому что диаграмма, созданная Google, имеет фиксированную ширину. При отладке вы увидите это

Вы можете видеть ширину 400px

// Установить параметры диаграммы

    var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};
chart.draw('', options);