相关疑难解决方法(0)

谷歌图表 - 响应问题 - 动态调整大小

我正在尝试使我的 Google Column Material Chart 具有响应性,但对我来说似乎有点不稳定并且根本无法正常工作。谁能帮我把这个流程做好

图表只会在页面加载时以该格式显示。当浏览器窗口宽度改变时,它不会动态调整大小。

JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/

HTML

<div id="chart">
    <div id="chart_div"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

#chart {
   border:5px solid #AAA;
   width: 80%; 
   min-height: 450px;
}
Run Code Online (Sandbox Code Playgroud)

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

<script>

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }, …
Run Code Online (Sandbox Code Playgroud)

html javascript google-visualization responsive

5
推荐指数
2
解决办法
7111
查看次数