軸のカスタマイズ

概要

データのディメンションは、多くの場合、、水平方向、垂直方向に表示されます。たとえば、面グラフ棒グラフキャンドルスティック縦棒グラフ複合グラフ折れ線グラフステップ面グラフ散布図などがあります。

軸のあるグラフを作成する場合、一部のプロパティをカスタマイズできます。

  • 非連続と連続
  • 方向 - hAxis/vAxis.direction オプションを使って方向をカスタマイズできます。
  • ラベルの位置とスタイル - hAxis/vAxis.textPosition と hAxis/vAxis.textStyle オプションを使用してラベルの位置とスタイルをカスタマイズできます。
  • 軸のタイトルのテキストとスタイル - hAxis/vAxis.title と hAxis/vAxis.titleTextStyle のオプションを使用して軸のタイトルのテキストとスタイルをカスタマイズできます。
  • 軸の縮尺 - hAxis/vAxis.logScale または hAxis/vAxis.scaleType オプションを使用して、軸の縮尺を対数目盛(対数)目盛に設定できます。
  • 軸構成オプションの一覧については、各グラフのドキュメントに記載されている hAxis と vAxis のオプションをご覧ください。

用語

長軸/短軸:

  • メジャー軸は、グラフの自然な向きに沿った軸です。折れ線グラフ、面グラフ、縦棒グラフ、複合グラフ、階段面グラフ、ローソク足チャートでは、横軸です。棒グラフの場合は縦方向で表示されます。散布図と円グラフには長軸がありません。
  • 軸はもう一方の軸です。

非連続/連続軸:

  • 非連続軸には、カテゴリと呼ばれる有限の数の等間隔値が存在します。
  • 連続軸には有効な値がいくつもあります。

非連続と連続

グラフの長軸は、個別または連続のいずれかです。離散軸を使用する場合、各系列のデータポイントは、行インデックスに従って軸全体に等間隔になります。連続軸を使用する場合、データポイントはドメイン値に従って配置されます。

ラベル付けも異なります。個別の軸で、カテゴリの名前(データのドメイン列で指定)をラベルとして使用します。連続軸では、ラベルが自動生成されます。グラフには、等間隔のグリッド線が表示されます。各グリッド線には、その値が表している値に応じてラベルが付けられています。

次の軸は常に連続します。

  • バブル軸の両軸。
  • 短軸。

線グラフ、面グラフ、棒グラフ、縦棒グラフ、ローソク足グラフ(およびこのような系列だけを含む複合グラフ)では、長軸の種類を制御できます。

  • 個別の軸の場合、データ列の型を string に設定します。
  • 連続軸の場合、データ列の型を numberdatedatetimetimeofday のいずれかに設定します。
非連続 / 継続的 最初の列の型
個別 文字列
継続的 数値
継続的 date

軸スケール

軸のスケールは scaleType オプションを使用して設定できます。たとえば、縦軸の目盛りを対数目盛に設定するには、次のオプションを使用します。

  vAxis: {
        scaleType: 'log'
  }

次の折れ線グラフは、線形(標準)スケールと対数スケールの両方で世界人口の増加を示しています。

</ph>

データにゼロまたは負の値が含まれている場合は、scaleType: 'mirrorLog' オプションを使用してポイントをプロットできます。ミラーログ スケールで、負の数のプロット値は、その数値の絶対値のログを引いた値になります。0 に近い値は、線形スケールでプロットされます。

次の例は、ミラーログ スケールと線形スケールの両方でプロットされた正と負のフィボナッチ数を示しています。

数値形式

ラベル番号の形式は hAxis.formatvAxis.format で制御できます。たとえば、{hAxis: { format:'#,###%'} } の場合、値が 10、7.5、0.5 の場合は「1,000%」、「750%」、「50%」と表示されます。次のいずれかのプリセットを指定することもできます。

  • {format: 'none'}: 数値を書式設定せずに表示します(8000000)
  • {format: 'decimal'}: 数値を千桁の区切りで表示します(例:8,000,000)
  • {format: 'scientific'}: 数値を科学的表記で表示します(8e6)
  • {format: 'currency'}: 数値を現地通貨で表示します(例:8,000,000.00 ドル)
  • {format: 'percent'}: 数値をパーセンテージで表示します(800,000,000%)
  • {format: 'short'}: 短縮番号を表示します(例:800 万)
  • {format: 'long'}: 数値を完全な単語として表示します(800 万)

下のグラフで、プリセットを選択できます。

上記のグラフのウェブページ全体は次のとおりです。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

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

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

テキストを使用する形式(たとえば、8,000,000 を「800 万」としてレンダリングする long 形式)を使用する場合は、Google Charts ライブラリを読み込む際に言語コードを指定することで、文字列を他の言語にローカライズできます。たとえば、「800 万」をロシア語の「8 миллиона」に変更するには、次のようにライブラリを呼び出します。

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>