Question

我有这张Google Chart（折线图）代码：

<html>
<head>

  <style>
    .chart {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-height: 500px;
    }

    #chart {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-height: 500px;
    }

  </style>

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

  <script type="text/javascript">

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

    window.addEventListener('resize', function (event) {
      drawChart();
    });

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        // width: 1800,
        // height: 1000,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));
      chart.draw(data, google.charts.Line.convertOptions(options));
    }


  </script>


</head>
<body>
<div id="line_top_x"></div>
</body>
</html>

你可以把它写到一个文件中，然后用浏览器打开它 - 它渲染得很好，但无论我添加到css（样式标记）我都无法增加图形的高度。

任何人都知道如何让高度达到页面的100％？

从屏幕截图中可以看出，图表被压扁，其高度仅为100px左右。

我添加了以下CSS：

body {
  width:80%;
  height:80%;
  margin:10% auto;
  background:#e6e6e6;
}

#chart_wrap {
  border:1px solid gray;
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow:hidden;
}

#chart {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

我仍然无法增加高度：

我想我需要用它来改变宽度/高度

     var options = {
        chart: {
          title: 'Node.js memory usage (RSS, Heap Used, Heap Total)',
          subtitle: '(In megabytes.)'
        },
        // width: 1800,
        // height: 1000,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));
      chart.draw(data, google.charts.Line.convertOptions(options));

但我不知道如何使用高度/宽度来使其成为100％的窗口/容器。

Answer 1

添加此css

#line_top_x {
    height: 100vh;
}

谷歌图表高度无法增加

1 个答案: