Angular Google Charts - 自动高度 [关闭]答案

【问题标题】：Angular Google Charts - Auto Height [closed]Angular Google Charts - 自动高度 [关闭]
【发布时间】：2016-08-30 20:57:01
【问题描述】：

我正在使用这个插件。

https://github.com/angular-google-chart/angular-google-chart

而且我需要帮助来定义带有 BarChart 类型的 Auto Height。当太大时，我使用滚动。

非常感谢！

【问题讨论】：

试试这样的：$scope.topDez.options = { 'title': '', 'legend' : {'position': 'bottom'}, height: topDez_descricao.length * 40 };

标签： javascript angularjs charts angular-chart

【解决方案1】：

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

使用 css 设置<div> 的样式

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

resize，图表需要重绘

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

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>

【讨论】：

希望对您有所帮助...