web-dev-qa-db-ja.com

Googleチャートの最大値と最小値

Googleチャートで最大値と最小値を設定するにはどうすればよいですか？

私はこれを成功せずに試しました：

vAxis: {
    viewWindowMode:'explicit',
        viewWindow: {
            max:3000,
            min:500
        }
    }

これは私が使用しているすべてのコードです：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.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',
          },
          vAxis: {
            viewWindowMode:'explicit',
            viewWindow: {
              max:3000,
              min:500
            }
        },
          bars: 'vertical' // Required for Material Bar Charts.
        };

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

        chart.draw(data, options);
      }
</script>

（ https://developers.google.com/chart/interactive/docs/gallery/barchart の例）

事前に感謝します。

google-visualization
17
random425

Material Chartsのリリースに伴い、Googleはオプションの指定方法を変更しています。これらのオプションの構造はまだ確定していないため、Googleは従来のオプション構造のコンバーター関数を新しい構造に提供します。将来変更される可能性のあるオプションを使用する代わりに、それを使用することをお勧めします。

したがって、次の2つの方法のいずれかで問題を修正できます。

  1. Googleが推奨するように、変換関数を使用できます（この方法は this jsfiddle または Googleの公式ドキュメント で実証されています（リンクされた見出しの下部にある注に注意してください） ））
      google.load("visualization", "1.0", {packages:["bar"]});
      google.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',
          },
          vAxis: {
            viewWindowMode:'explicit',
            viewWindow: {
              max:3000,
              min:500
            }
        },
          bars: 'vertical', // Required for Material Bar Charts.
            width: 800,
            height: 600
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
    
          <div id="barchart_material"></div>
  1. 将来変更される可能性のあるオプションを引き続き使用できます。チャートの破損を気にしない場合、探しているオプションはaxes.y.all.range。{min、max}です。 this jsfiddle でそのオプションの動作を確認できます。
google.load("visualization", "1.0", {
    packages: ["bar"]
});
google.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',
        },
        axes: {
            y: {
                all: {
                    range: {
                        max: 3000,
                        min: 500
                    }
                }
            }
        },
        bars: 'vertical', // Required for Material Bar Charts.
        width: 800,
        height: 600
    };

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


    chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="barchart_material"></div>

出典：Google Chartで作業しています。

29
Sergey G