軸のカスタマイズ

  1. Overview
  2. 用語
  3. 離散と連続
  4. 軸スケール
  5. 数値形式

概要

多くの場合、データのディメンションは水平方向と垂直方向の軸として表示されます。たとえば、面グラフ、棒グラフ、ローソク足チャート、縦棒グラフ、複合グラフ、折れ線グラフ、階段面グラフ、散布図などが該当します。

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

  • 離散と連続
  • Direction - hAxis/vAxis.direction オプションを使用すると、方向をカスタマイズできます。
  • ラベルの位置とスタイル - hAxis/vAxis.textPosition と hAxis/vAxis.textStyle のオプションを使用して、ラベルの位置とスタイルをカスタマイズできます。
  • 軸のタイトルのテキストとスタイル - hAxis/vAxis.title オプションと hAxis/vAxis.titleTextStyle オプションを使用して、軸タイトルのテキストとスタイルをカスタマイズできます。
  • 軸の目盛り - hAxis/vAxis.logScale または hAxis/vAxis.scaleType オプションを使用して、軸の目盛りを対数（対数）目盛に設定できます。
  • 軸の構成オプションの一覧については、ご使用のグラフのドキュメントで [hAxis] と [vAxis] のオプションをご確認ください。

用語

主軸/短軸:

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

離散軸/連続軸:

  • 離散軸には、カテゴリと呼ばれる、等間隔の有限の値が含まれます。
  • 連続軸の場合、取り得る値の数は無限です。

離散と連続

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

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

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

  • バブルチャートの両軸。
  • 短軸。

折れ線グラフ、面グラフ、縦棒グラフ、縦棒グラフ、ローソク足チャート（およびこれらの系列のみを含む複合グラフ）では、主軸の種類を指定できます。

  • 離散軸の場合は、データ列の型を string に設定します。
  • 連続軸の場合、データ列のタイプを number、date、datetime、timeofday のいずれかに設定します。
離散・連続 最初の列の型 例
個別 string
連続 数値
連続 date

軸の目盛り

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

  vAxis: {
        scaleType: 'log'
  }

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

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

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

数値形式

hAxis.format と vAxis.format を使用して、ラベル番号のフォーマットを制御できます。たとえば、{hAxis: { format:'#,###%'} } は値が 10、7.5、0.5 の場合に「1,000%」、「750%」、「50%」の値を表示します。次のプリセットを指定することもできます。

  • {format: 'none'}: 書式なしの数値を表示します（例:8000000）
  • {format: 'decimal'}: 数値を 3 桁ごとの区切り記号で表示します（例: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 ライブラリを読み込むときに言語コードを指定することで、文字列を他の言語にローカライズできます。たとえば、「8 million」をロシア語の「8 ieллиона」に変更するには、次のようにライブラリを呼び出します。

<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>