0

こんにちは、私はGoogleの縦棒グラフを持っていて完璧に動作しますが、ブラウザのサイズを変更すると縦棒グラフがオーバーフローし、サイズが変更されません。私のウェブサイトはレスポンシブで、棒グラフをそのように配置したくありません。縦棒グラフをレスポンシブにするにはどうすればよいですか?

この縦棒グラフは developers.google.com/chart/interactive/docs/gallery/columnchart から取得しました

ここにコードがあります

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title><?php echo $title;?></title>
    <!-- Load Google chart api -->

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
            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',
      },
      bars: 'vertical',
      vAxis: {format: 'decimal'},
      height: 400,
      colors: ['#1b9e77', '#d95f02', '#7570b3']
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));

    var btns = document.getElementById('btn-group');

    btns.onclick = function (e) {

      if (e.target.tagName === 'BUTTON') {
        options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    }
  }
    </script>
 </head>
 <body>        

   <div id="chart_div" style="width:100%;"></div>
 <br/>
<div id="btn-group">
  <button class="button button-blue" id="none">No Format</button>
  <button class="button button-blue" id="scientific">Scientific Notation</button>
  <button class="button button-blue" id="decimal">Decimal</button>
  <button class="button button-blue" id="short">Short</button>
 </div>
 </body>
 </html>

div から width="100%" も追加しようとしましたが、まったく機能しません。

4

1 に答える 1

0

現在、Google チャートの問題は、レスポンシブ機能がないことです。

Web 上の以前の調査から、私が見つけて実装した最適なソリューションは次のとおりでした。

$(window).resize(function () {
    drawChart();
});

このコードはdrawChart()、ブラウザ ウィンドウのサイズが変更されるたびに関数を呼び出します。したがって、これはチャートが毎回再描画されることを意味します。これは最善または効率的な解決策ではないかもしれませんが、私にとってはうまくいきました。

この機能を許可するに.resize()は、jQuery ライブラリが必要です。詳細については、こちらを参照してください。

于 2016-06-16T12:52:56.773 に答える