javascript - Angular Google Charts - 自动高度

Question

<分区>

Answer 1

图表会自动填充包含<div>

使用 css 设置 <div> 的样式

并丢失任何特定 height或 width图表上的配置选项

关于 resize ，图表将需要重新绘制

虽然下面的例子不是 Angular 的，但是图表的行为是一样的

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Month', type: 'string'},
        {label: 'Amount', type: 'number'},
        {role: 'style', type: 'string'}
      ],
      rows: [
        {c:[{v: 'April'}, {v: 12}, {v: '#c62828'}]},
        {c:[{v: 'May'}, {v: 10}, {v: '#ad1457'}]},
        {c:[{v: 'June'}, {v: 8}, {v: '#6a1b9a'}]},
        {c:[{v: 'July'}, {v: 6}, {v: '#4527a0'}]},
        {c:[{v: 'August'}, {v: 4}, {v: '#283593'}]},
        {c:[{v: 'September'}, {v: 2}, {v: '#1565c0'}]},
        {c:[{v: 'October'}, {v: 2}, {v: '#00838f'}]},
        {c:[{v: 'November'}, {v: 4}, {v: '#00695c'}]},
        {c:[{v: 'December'}, {v: 6}, {v: '#2e7d32'}]},
        {c:[{v: 'January'}, {v: 8}, {v: '#9e9d24'}]},
        {c:[{v: 'February'}, {v: 10}, {v: '#f9a825'}]},
        {c:[{v: 'March'}, {v: 12}, {v: '#d84315'}]}
      ]
    });

    var options = {
      backgroundColor: 'transparent',
      legend: 'none',
      theme: 'maximized'
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);

    $(window).resize(function() {
      chart.draw(dataTable, options);
    });
  },
  packages:['corechart']
});

body {
  margin: 0;
}

.header {
  background-color: red;
  height: 40px;
}

.mainBody {
  background-color: yellow;
  bottom: 20px;
  position: absolute;
  top: 40px;
  width: 100%;
}

.footer {
  background-color: blue;
  bottom: 0;
  height: 20px;
  position: absolute;
  width: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="header" >&nbsp;</div>
<div class="mainBody" id="chart_div"></div>
<div class="footer">&nbsp;</div>