自訂軸

  1. Overview
  2. 術語
  3. 分散式與連續
  4. 軸量表
  5. 數字格式

總覽

資料中的維度通常以軸、水平和垂直方向顯示。例如面積圖、長條圖、K 線圖、柱狀圖、組合圖、折線圖、階梯面積圖和散佈圖。

建立含有軸的圖表時，您可以自訂其部分屬性：

  • 分散式與連續
  • 方向 - 您可以使用 hAxis/vAxis.direction 選項自訂方向。
  • 標籤位置和樣式 - 您可以使用 hAxis/vAxis.textPosition 和 hAxis/vAxis.textStyle 選項來自訂標籤位置和樣式。
  • 軸標題文字和樣式 - 您可以使用 hAxis/vAxis.title 和 hAxis/vAxis.titleTextStyle 選項自訂軸的標題文字和樣式。
  • 軸線尺 - 您可以使用 hAxis/vAxis.logScale 或 hAxis/vAxis.scaleType 選項，將軸刻度設為對數 (log) 縮放。
  • 如需完整的軸設定選項清單，請參閱特定圖表的說明文件中的 hAxis 和 vAxis 選項。

術語

主軸/次要軸：

  • 「主要」軸是圖表自然方向上的軸。對折線、面積圖、柱狀圖、組合圖、階梯面積和 K 線圖來說，這是指橫軸。如果是長條圖，則為垂直圖表。散佈圖和圓餅圖沒有主軸。
  • 次要軸是另一軸。

離散/連續軸：

  • 「離散」軸的值有固定數量的平均間距，稱為類別。
  • 連續軸的可能值數量沒有上限。

離散與連續

圖表的大軸可以是獨立或連續的。如果使用獨立軸，每個序列的資料點會根據資料列索引，在該軸之間平均間距。使用連續軸時，系統會根據其網域值來定位資料點。

此外，標籤功能也有所不同。在離散軸中，類別名稱 (在資料的網域欄指定) 會做為標籤使用。系統會自動產生連續軸的標籤：圖表會顯示均等間距的格線，其中各格線會根據其代表的值加上標籤。

下列軸一律為連續：

  • 兩軸的泡泡圖。
  • 小軸。

在折線圖、面積圖、長條圖、柱狀圖和 K 線圖中 (以及只包含這類序列的組合圖)，您可以控制主要軸的類型：

  • 如果是離散軸，請將資料欄類型設為 string。
  • 如果是連續軸，請將資料欄類型設為下列其中一個：number、date、datetime 或 timeofday。
離散 / 連續 第一欄類型 範例
離散 字串
持續 號碼
持續 日期

軸刻度

您可以使用 scaleType 選項設定軸的比例。舉例來說，如要將縱軸的刻度設為對數比例，請使用下列選項：

  vAxis: {
        scaleType: 'log'
  }

以下折線圖顯示以線性 (標準) 比例和對數尺度呈現的全球人口成長情形。

[9, 202,12018:12051:10: [19,12052051:10,1205(40:10,1236.405(第 11 行, 10, 1205(第 11 天, 18,12052551112111111 月 111)

如果資料包含零或負值，您可以使用 scaleType: 'mirrorLog' 選項繪製點。在鏡像對數尺度中，負數的繪製值是減去該數字絕對值的記錄檔。接近 0 的值會以線性比例繪製。

以下範例顯示鏡像記錄檔比例和線性比例同時繪製的正負費波那契數。

數字格式

您可以使用 hAxis.format 和 vAxis.format 控制標籤號碼的格式。舉例來說，{hAxis: { format:'#,###%'} } 會顯示「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>

使用採用文字的格式 (例如 long 格式將顯示 8,000,000 為「800 萬個」) 時，您可以在載入 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>