Question

我创建了宽度为100％的Google图表：

<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>

然后，我以display = none开头创建相同的图表。并显示点击后的图表：

<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的{{1}}事件中执行相同的操作。

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)
}

Answer 2

当块具有display: none;

时，JavaScript无法计算宽度

由于脚本无法计算宽度，因此需要默认的400px宽度。

要解决此问题，您有几种选择：

1）不使用display: none，而是使用：opacity: 0或visibility: hidden

2）当块变得可见时{display: block绘制图表，因此可以进行计算。

如果仅在显示元素之前调用绘制图，则效果很好。这是因为，当块已具有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%，即完整视口但是正如您所看到的，该图不是全角，即谷歌创建的图表是固定宽度的如果您调试，您将看到此

您可以看到宽度为400px

//设置图表选项

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

从无显示更改为块显示时，为什么Google图表的宽度不起作用？

3 个答案: