自訂軸心

簡介

資料中的維度通常以、水平和垂直的形式顯示。例如:面積圖長條圖燭台圖柱狀圖組合圖折線圖階梯狀圖散佈圖

使用軸線建立圖表時,您可以自訂部分屬性:

  • 離散與持續
  • 方向 - 您可以使用 hAxis/vAxis.direction 選項自訂方向。
  • 標籤位置和樣式 - 您可以使用 hAxis/vAxis.textPosition 和 hAxis/vAxis.textStyle 選項自訂標籤的定位和樣式。
  • 軸標題文字和樣式 - 您可以使用 hAxis/vAxis.title 和 hAxis/vAxis.titleTextStyle 選項自訂軸標題文字和樣式。
  • 軸度單位 - 您可以使用 hAxis/vAxis.logScale 或 hAxis/vAxis.scaleType 選項,將軸度設為對數 (記錄) 比例。
  • 如需軸設定選項的完整清單,請參閱特定圖表的說明文件中的 hAxis 和 vAxis 選項。

術語

主要/小軸:

  • 「主要」軸是圖表自然方向的軸。如果是折線圖、面積圖、柱狀圖、組合圖、階梯狀面積和燭光圖,這就是水平軸。長條圖的直立圖散佈圖和圓餅圖沒有主要軸。
  • 次要軸是另一個軸。

離散/連續軸:

  • 離散軸是有限的等距值,也稱為「類別」。
  • 連續軸包含無限數量的值。

離散與連續

圖表的主軸可以是離散或連續。使用離散軸時,系統會根據每個資料列的索引,在不同的軸線上平均分配各系列的資料點。使用連續軸時,系統會根據其網域值定位資料點。

且標籤也不同。在離散軸上,類別的名稱 (在資料的網域欄中指定) 會做為標籤使用。在連續軸上,系統會自動產生標籤:圖表顯示各行間距相等的格狀線,其中每個格線都會依照其代表的值加上標籤。

下列軸永遠為連續:

  • 兩個對話框圖表的軸。
  • 短軸。

In line, area, bar, column and candlestick charts (and combo charts containing only such series), you can control the type of the major axis:

  • 如果是離合軸,請將資料欄欄類型設為 string
  • 如果是連續軸,請將資料欄類型設為以下其中一項:numberdatedatetimetimeofday
離散 / 連續 第一欄類型 範例
離散 string
連續 數字
連續 date

軸度計

您可以使用 scaleType 選項來設定軸的刻度。舉例來說,如要設定垂直軸的刻度來記錄刻度,請使用以下選項:

  vAxis: {
        scaleType: 'log'
  }

以下折線圖顯示全球人口在線性 (標準) 比例和記錄量表中的成長。

<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 程式庫時指定語言代碼,將字串本地化為其他語言。舉例來說,如要將「8 百萬」變更為俄羅斯的「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>