長條圖

總覽

Google 長條圖會使用 SVG 或 VML，在瀏覽器中呈現，視使用者的瀏覽器而定。如同所有 Google 圖表，長條圖會在使用者將滑鼠遊標懸停在資料上時顯示工具提示。如需這張圖表的垂直版本，請參閱柱狀圖。

示例

色條

讓我們繪製四個貴金屬的密度：

上面所有顏色預設為藍色。這是因為這些系列都屬於同一系列；如有第二個序列，則會呈現紅色。我們可以利用樣式角色自訂這些顏色：

選擇顏色有三種不同方式，我們的資料表會展示這三種顏色：RGB 值、英文名稱名稱，以及類 CSS 宣告：

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

長條圖樣式

樣式角色可讓您透過類似 CSS 的宣告，控制長條外觀的幾個層面：

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

我們不建議在圖表中隨意混合樣式，只要挑選樣式並沿用於此，但想要實際示範所有樣式屬性，請參考以下取樣器：

前兩列各自使用特定的 color (第一個使用英文名稱，第二個使用 RGB 值)。因此未選擇 opacity，因此會使用預設值 1.0 (完全不透明)，這就是為什麼第二個長條會遮住後方的格線。在第三個長條中，使用 0.2 的 opacity 來顯示格線。在第四個列中，會使用三個樣式屬性：stroke-color 和 stroke-width 來繪製邊框，而使用 fill-color 指定內部矩形的顏色。最右側長條則會額外使用 stroke-opacity 和 fill-opacity 來選擇邊框和填滿的不透明度：

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

標籤列

圖表中有多種標籤，例如工具提示中的刻點標籤、圖例標籤和標籤。在本節中，我們將說明如何在長條圖的長條圖內部 (或附近) 中加入標籤。

假設我們想讓每個長條加上合適的化學符號，您可以使用 annotation 角色完成這項操作：

在資料表中，我們使用 { role: 'annotation' } 定義一個新資料欄，用來存放長條圖標籤：

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

雖然使用者能將遊標懸停在長條上，以查看資料值，但您可能會想要在長條上加入這些值：

這比實際程序稍微複雜，因為我們建立 DataView 來指定每個長條的註解。

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

為了要採用不同的格式設定值，我們可以定義 formatter 並包裝到一個函式中，如下所示： 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

接著，我們可以用 calc: getValueAt.bind(undefined, 1) 呼叫此函式。

如果標籤太大，無法完全填滿整個長條，則會顯示在下列外部：

堆疊長條圖

堆疊長條圖是一種長條圖，會將相關數值置於另一個長條圖。如有任何負值，系統會在圖表軸線下方以反向順序堆疊。堆疊長條圖通常會將類別自然分割成元件。舉例來說，假設有幾本假想圖書銷售，按類別和時間比較：

您可將 isStacked 選項設為 true，以建立堆疊長條圖：

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

堆疊長條圖也支援 100% 堆疊，每個網域值的元素堆疊會經過重新縮放，增加至 100%。這個選項的選項包括 isStacked: 'percent'，可將每個值的格式設定為 100% 的百分比，而 isStacked: 'relative' 則將每個值的格式設定為 1 的分數。還有 isStacked: 'absolute' 選項，其功能相當於 isStacked: true。

請注意，在右側 100% 堆疊圖表中，刻度值採用相對 0 到 1 的比例做為分數 1，但軸值會顯示為百分比。這是因為百分比軸刻點是套用「#.##%」的格式來搭配相對 0-1 尺度值的結果。使用 isStacked: 'percent' 時，請務必使用相對 0-1 的量表指定所有滴答。

堆疊式
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
已堆疊 100%
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

建立 Material 長條圖

Google 在 2014 年發布了相關規範，針對在 Google 平台上執行的各項資源和應用程式 (例如 Android 應用程式)，支援一般外觀和風格。這種做法稱為「質感設計」。我們將提供所有核心圖表的「Material」版本；如果您需要，歡迎繼續使用。

建立質感長條圖與建立概念類似，現在我們稱為「經典」長條圖。您會載入 Google Visualization API (雖然使用 'bar' 套件而非 'corechart' 套件)、定義資料表，然後建立物件 (但類別不是 google.charts.Bar，而不是 google.visualization.BarChart)。

注意：質感圖表不適用於舊版 Internet Explorer。(Material 圖表需要的 SVG 除外，IE8 及更舊版本並不支援 SVG)。

相較於傳統長條圖，質感設計長條圖經過許多小改善，包括改良的調色盤、圓角、更清晰的標籤格式、序列之間的預設間距、更柔和的格線與標題 (以及新增字幕)。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.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',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Material 圖表目前為 Beta 版。外觀和互動功能基本上是最終版本，但許多傳統圖表尚未提供可用選項。如需目前不支援的選項清單，請參閱這個問題。

此外，宣告選項的方式尚未定案，因此如果你使用的是任何傳統選項，就必須將以下行取代為 Material 選項：

chart.draw(data, options);

...包含以下內容：

chart.draw(data, google.charts.Bar.convertOptions(options));

使用 google.charts.Bar.convertOptions() 可讓您利用特定功能，例如 hAxis/vAxis.format 預設選項。

Dual-X 圖表

注意：Dual-X 軸僅適用於 Material 圖表 (也就是含有 bar 套件的圖表)。

有時候，您會想在長條圖中顯示兩個序列，並且有兩個獨立的 X 軸：一個序列的頂部，另一個是另一個序列的底部軸：

請注意，兩個 x 軸標記不同 (「parsecs」與「apparent magnitude」)，並各自有專屬的縮放比例和格線。如要自訂這項行為，請使用 hAxis.gridlines 選項。

在下方程式碼中，axes 和 series 選項會同時指定圖表的雙 X 外觀。series 選項會指定每個項目要使用的軸 ('distance' 和 'brightness'；不需要與資料表中的資料欄名稱建立任何關係)。接著，axes 選項會將這張圖表設為雙 X 圖表，將 'apparent magnitude' 軸置於頂端，且 'parsecs' 軸在底部。

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

「Top-X」圖表

注意：Top-X 軸僅適用於 Material 圖表 (也就是含有 bar 套件的軸)。

如果您想將 X 軸標籤和標題放在圖表頂端而非底部，可以使用 axes.x 選項在 Material 圖表中執行這項操作：

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "corechart"。視覺呈現的類別名稱為 google.visualization.BarChart。

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.BarChart(container);

對於 Material 長條圖，google.charts.load 套件名稱為 "bar"。視覺呈現的類別名稱為 google.charts.Bar。

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

資料格式

列：表格中的每一列都代表一組長條。

資料欄：

  第 0 欄 第 1 欄 ... 第 N 欄
用途： 這個群組中的第 1 列值 ... 這個群組中的長條 N 值
資料類型： 號碼 ... 號碼
角色： 網域 資料 ... 資料
選用的資料欄角色： ...

 

設定選項

名稱
animation.duration

此為動畫的時間長度，以毫秒為單位。詳情請參閱動畫說明文件。

類型：數字
預設值：0
animation.easing

套用至動畫的加/減速功能。可用選項如下所示：

  • 「線性」- 固定速度。
  • 「in」 - 減輕 - 開始緩慢並加快速度。
  • 'out' - 簡化 - 啟動並放慢速度。
  • 「inAndOut」- 加速進出，先放慢速度、放慢速度再放慢。
類型：字串
預設：「線性」
animation.startup

指定圖表是否會在初次繪圖時顯示動畫。如果設為 true，圖表會從基準開始，並動畫呈現最終狀態。

類型：布林值
預設 false
annotations.alwaysOutside

在長條圖和 資料欄圖表中，如果設為 true，則會繪製長條圖/資料欄以外的所有註解。

類型：布林值
預設值：false
annotations.datum
如果圖表支援註解，annotations.datum 物件可讓您覆寫 Google 圖表為個別資料元素提供的註解 (例如長條圖上每個長條顯示的值)。您可以使用 annotations.datum.stem.color 控制顏色，使用 annotations.datum.stem.length 控製字根長度，並使用 annotations.datum.style 控制樣式。
類型：物件
預設：顏色為「黑色」，長度為 12，樣式為「點」。
annotations.domain
如果圖表支援註解，annotations.domain 物件可讓您覆寫 Google 圖表針對網域提供的註解 (圖表的主要軸，例如一般折線圖上的 X 軸)。您可以使用 annotations.domain.stem.color 控制顏色，使用 annotations.domain.stem.length 控製字根長度，並使用 annotations.domain.style 控制樣式。
類型：物件
預設：顏色為「黑色」，長度為 5，樣式為「點」。
annotations.boxStyle

如果圖表支援註解，annotations.boxStyle 物件會控制註解周圍方塊的外觀：

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

這個選項目前支援區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。註解圖表不支援此功能。

類型：物件
預設值：null
annotations.highContrast
如果圖表支援註解，您可以使用 annotations.highContrast 布林值覆寫 Google 圖表的註解顏色選項。根據預設，annotations.highContrast 為 true，因此圖表會選取對比度良好的註解顏色：深色背景使用淺色，淺色背景則為深色。如果將 annotations.highContrast 設為 false，且未指定自己的註解顏色，Google 圖表會為註解使用預設的系列顏色：
類型：布林值
預設值：true
annotations.stem
如果圖表支援註解，您可以使用 annotations.stem 物件覆寫 Google 圖表的 Stem 樣式選項。您可以使用 annotations.stem.color 和字根長度annotations.stem.length控制顏色。請注意，詞幹長度選項對具有 'line' 樣式的註解沒有影響：針對 'line' Daatum 註解，詞幹長度一律與文字相同；如果是 'line' 網域註解，詞幹延伸至整個圖表。
類型：物件
預設：顏色為「黑色」；網域註解的長度為 5，Datum 註解則為 12。
annotations.style
如果圖表支援註解，您可以使用 annotations.style 選項覆寫 Google 圖表的註解類型選項。可以是 'line' 或 'point'。
類型：字串
預設：「point」
annotations.textStyle
如果圖表支援註解，annotations.textStyle 物件會控制註解文字的外觀：
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

這個選項目前支援區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。 註解圖表 不支援此功能。

類型：物件
預設值：null
axisTitlesPosition

比較軸標題和圖表區域的位置。支援的值：

  • 內 - 在圖表區域繪製軸標題。
  • 消失 - 在圖表區域外繪製軸標題。
  • 無 - 省略軸標題。
類型：字串
預設值：「out」
backgroundColor

圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 'red' 或 '#00cc00')，或具有下列屬性的物件。

類型：字串或物件
預設：「white」
backgroundColor.stroke

圖表邊框顏色，以 HTML 顏色字串表示。

類型：字串
預設值：「#666」
backgroundColor.strokeWidth

邊框寬度 (以像素為單位)。

類型：數字
預設值：0
backgroundColor.fill

圖表填滿顏色，以 HTML 顏色字串表示。

類型：字串
預設：「white」
bar.groupWidth
一組長條的寬度，可使用下列任一格式指定：
  • 像素 (例如 50)。
  • 每個群組可用的寬度百分比 (例如「20%」)，「100%」表示各群組之間沒有任何空格。
類型：數字或字串
預設：黃金比例，約 61.8%。
長條

Material 長條圖中的長條是垂直或水平。這個選項不會影響傳統長條圖或傳統柱狀圖。

類型：「Horizontal」或「vertical」
預設：「vertical」
chartArea

此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例：chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型：物件
預設值：null
chartArea.backgroundColor
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，可以提供下列屬性：
  • stroke：以十六進位字串或英文顏色名稱提供的顏色。
  • strokeWidth：如有提供，會在指定寬度的圖表區域 (以及 stroke 的顏色) 周圍繪製邊框。
類型：字串或物件
預設：「white」
chartArea.left

從左框線繪製圖表的時間長度。

類型：數字或字串
預設：自動
chartArea.top

圖表與上框線的繪製距離。

類型：數字或字串
預設：自動
chartArea.width

圖表區域寬度。

類型：數字或字串
預設：自動
chartArea.height

圖表區域高度。

類型：數字或字串
預設：自動
chart.subtitle

在質感設計圖表中，此選項可指定字幕。只有質感圖表支援字幕。

類型：字串
預設值：null
chart.title

在質感設計圖表中，此選項可指定標題。

類型：字串
預設值：null
顏色

圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如：colors:['red','#004411']。

類型：字串陣列
預設：預設顏色
dataOpacity

資料點的透明度，1.0 表示完全不透明，0.0 則完全透明。 在散佈圖、直方圖、長條圖和柱狀圖中，這是指可見資料：散佈圖中的圓點和其他矩形中的矩形。在選取資料的圖表中，系統會建立圓點 (例如折線和面積圖)，指的是懸停或選取時顯示的圓形。組合圖同時呈現出兩種行為，而這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度，請參閱 趨勢線不透明度 相關說明)。

類型：數字
預設值：1.0
enableInteractivity

圖表是否會擲回以使用者為基礎的事件，或是對使用者互動做出反應。如果設為 False，圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件)，且不會顯示懸停文字，或根據使用者輸入內容而變更。

類型：布林值
預設值：true
explorer

explorer 選項可讓使用者平移及縮放 Google 圖表。explorer: {} 提供預設的探索工具行為，讓使用者可透過拖曳來水平和垂直平移，以及捲動畫面來縮放畫面。

這項功能仍在實驗階段，未來版本可能會有所異動。

注意：多層檢視僅適用於連續軸 (例如數字或日期)。

類型：物件
預設值：null
explorer.actions

Google 圖表探索工具支援三種操作：

  • dragToPan：拖曳即可水平和垂直平移圖表。如要僅沿著水平軸平移，請使用 explorer: { axis: 'horizontal' }。垂直軸也很類似。
  • dragToZoom：探索工具的預設行為是在使用者捲動畫面時放大和縮小。如果使用 explorer: { actions: ['dragToZoom', 'rightClickToReset'] }，沿著矩形區域拖曳即可放大該區域。建議您在使用 dragToZoom 時一律使用 rightClickToReset。如要自訂縮放比例，請參閱 explorer.maxZoomIn、explorer.maxZoomOut 和 explorer.zoomDelta。
  • rightClickToReset：在圖表上按一下滑鼠右鍵，即可將圖表恢復至原始的平移和縮放等級。
類型：字串陣列
預設：['dragToPan', 'rightClickToReset']
explorer.axis

根據預設，使用 explorer 選項時，使用者可以水平和垂直平移。如果您只想橫向平移，請使用 explorer: { axis: 'horizontal' }。同樣地，explorer: { axis: 'vertical' } 會啟用僅限垂直的平移功能。

類型：字串
預設：水平和垂直平移
explorer.keepInBounds

根據預設，無論資料位於何處，使用者都可以平移所有內容。如要確保使用者不會平移超出原始圖表範圍，請使用 explorer: { keepInBounds: true }。

類型：布林值
預設值：false
explorer.maxZoomIn

探險家可放大的上限。根據預設，使用者可以放大到足夠的畫面，只會看到原始檢視畫面的 25%。設定 explorer: { maxZoomIn: .5 } 能讓使用者只放大到夠大的程度，只看得到原始檢視畫面的一半。

類型：數字
預設值：0.25
explorer.maxZoomOut

探險家可縮小的最大範圍。根據預設，使用者可以縮小到夠大的範圍，讓圖表只佔用 1/4 的可用空間。如果設定 explorer: { maxZoomOut: 8 }，使用者就能縮小到圖表只佔 1/8 的可用空間。

類型：數字
預設：4
explorer.zoomDelta

使用者放大或縮小時，explorer.zoomDelta 會決定其縮放的比例。數字越小，縮放效果也越流暢。

類型：數字
預設值：1.5
focusTarget

可接收滑鼠遊標懸停動作的實體類型。這也會影響滑鼠點選時所選取的實體，以及與事件相關聯的資料表元素。可以是下列其中一項：

  • 「datum」：著重於單一資料點。與資料表中的儲存格建立關聯。
  • 「類別」：專注於主要軸上所有資料點的集合。與資料表中的某一列相關聯。

在 FocusTarget 的「類別」中，工具提示會顯示所有類別值。適合用於比較不同序列的值。

類型：字串
預設：「datum」
fontSize

圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：數字
預設：自動
fontName

圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：字串
預設值：「trigger」
forceIFrame

在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。)

類型：布林值
預設值：false
hAxes

如果圖表有多個水平軸，請指定個別水平軸的屬性。每個子項物件都是 hAxis 物件，且可包含 hAxis 支援的所有屬性。這些屬性值會覆寫同一屬性的所有通用設定。

如要指定包含多個水平軸的圖表，請先使用 series.targetAxisIndex 定義新軸，然後使用 hAxes 設定軸。以下範例會將序列 1 指派給底部軸，並指定自訂標題和文字樣式：

series:{1:{targetAxisIndex:1}}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'}}}

這個屬性可以是物件或陣列：物件是物件的集合，每個物件都會有指定所定義軸的數值標籤，也就是上述格式；陣列是物件的陣列，每個軸代表一個物件。舉例來說，下列陣列樣式標記法與上述 hAxis 物件相同：

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
類型：物件陣列，或含子項物件的物件
預設值：null
hAxis

可讓成員設定各種水平軸元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
類型：物件
預設值：null
hAxis.baseline

橫軸的基準線。

類型：數字
預設：自動
hAxis.baselineColor

水平軸的基準顏色。可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。

類型：數字
預設：「black」
hAxis.direction

沿著水平軸的值成長的方向。指定 -1 將值的順序反轉。

類型：1 或 -1
預設值：1
hAxis.format

數字軸標籤的格式字串。這是 ICU 模式集 的子集。舉例來說，{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 萬)

套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。

計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定 format:"#"，但請注意，如果沒有替代項目符合這項條件，系統就不會顯示格線或刻點。

類型：字串
預設：自動
hAxis.gridlines

具有屬性，可設定水平軸格線的物件。請注意，水平軸格線是垂直繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{color: '#333', minSpacing: 20}
類型：物件
預設值：null
hAxis.gridlines.color

圖表區域中的水平格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：「#CCC」
hAxis.gridlines.count

圖表區域中的水平格線約略數量。 如果為 gridlines.count 指定正數，系統會使用該數字計算格線之間的 minSpacing。 您可以將 1 值指定為只繪製一個格線，指定 0 值則可繪製不繪製格線。指定 -1 (此為預設值)，即可依據其他選項自動計算格線數量。

類型：數字
預設：-1
hAxis.gridlines.units

將日期/日期時間/時間資料類型與圖表計算的格線搭配使用時，覆寫預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
hAxis.minorGridlines

此物件可讓成員在水平軸上設定次要格線，與 hAxis.gridlines 選項類似。

類型：物件
預設值：null
hAxis.minorGridlines.color

圖表區域中的水平小格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：使用格線與背景顏色混合
hAxis.minorGridlines.count

minorGridlines.count 選項大部分都已淘汰，除非將計數設為 0 來停用次要格線。次要格線的數量現在完全取決於主要格線之間的間隔 (請參閱 hAxis.gridlines.interval) 和最低所需空間 (請參閱 hAxis.minorGridlines.minSpacing)。

類型：數字
預設值：1
hAxis.minorGridlines.units

與計算的次要格線搭配使用時，覆寫日期/日期時間/時間資料類型各個面向的預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
hAxis.logScale

hAxis 屬性將水平軸設為對數尺度 (要求所有值都必須為正數)。如果為「是」，請設為 true。

類型：布林值
預設值：false
hAxis.scaleType

hAxis 屬性，讓水平軸成為對數尺度。可以是下列任一值：

  • null - 不執行對數縮放。
  • 「log」：對數縮放。系統不會繪製負值和零的值。這個選項與設定 hAxis: { logscale: true } 相同。
  • 「MirrorLog」：繪製負值和零的對數進行對數縮放。負數的繪製值是絕對值記錄檔的負數。接近 0 的值會以線性比例繪製。
類型：字串
預設值：null
hAxis.textStyle

這個物件會指定水平軸文字樣式。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.textPosition

橫軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。

類型：字串
預設值：「out」
hAxis.ticks

將自動產生的 X 軸刻點替換為指定的陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件，則應提供用於刻點值的 v 屬性，以及選用的 f 屬性，其中含有要顯示為標籤的常值字串。

除非您指定要覆寫的 viewWindow.min 或 viewWindow.max，否則 viewWindow 會自動展開以包含最小和最大滴答。

例：

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
類型：元素陣列
預設：自動
hAxis.title

hAxis 屬性，指定橫軸的標題。

類型：字串
預設值：null
hAxis.titleTextStyle

這個物件會指定水平軸標題文字樣式。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

將水平軸的最大值移至指定值；在多數圖表中，這個值會向右移動。如果設為值小於資料的最大 x 值，系統會忽略這項設定。 hAxis.viewWindow.max 會覆寫這項屬性。

類型：數字
預設：自動
hAxis.minValue

將水平軸的最小值移至指定值；在大多數圖表中，這個數字會向左移動。如果設定的值大於資料中最小值 x 值，系統會忽略這項設定。 hAxis.viewWindow.min 會覆寫這項屬性。

類型：數字
預設：自動
hAxis.viewWindowMode

指定如何縮放水平軸，以轉譯圖表區域中的值。支援的字串值如下：

  • 「漂亮」：縮放水平值，讓最大和最小值在圖表區域的左右兩側顯示。ViewWindow 會展開為最接近的數字主要格線，或找出最接近日期和時間的次要格線。
  • 「maximized」：縮放水平值，讓最大和最小值觸及圖表區域的左右兩側。這項操作會忽略 haxis.viewWindow.min 和 haxis.viewWindow.max。
  • 「explicit」：已淘汰指定圖表區域左右比例值的選項。(已淘汰，因為 haxis.viewWindow.min 和 haxis.viewWindow.max 是多餘的值)。系統會裁剪這些值以外的資料值。您必須指定 hAxis.viewWindow 物件，說明要顯示的最大值和最小值。
類型：字串
預設值：等同於「漂亮」，但使用時優先度為 haxis.viewWindow.min 和 haxis.viewWindow.max。
hAxis.viewWindow

指定水平軸的裁剪範圍。

類型：物件
預設值：null
hAxis.viewWindow.max

要顯示的水平資料最大值。

當 hAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
hAxis.viewWindow.min

要顯示的水平資料最小值。

當 hAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
高度

圖表的高度，以像素為單位。

類型：數字
預設：所含元素的高度
isStacked

如果設為 True，系統就會在每個網域值中堆疊所有序列的元素。 注意：在「Column」、「Area」和「SteppedArea」圖表中，Google 圖表會反向排序圖例項目的順序，使其與序列元素的堆疊更一致 (例如，0 系列是最底部的圖例項目)。這項「不」 適用於長條圖圖表。

isStacked 選項也支援 100% 堆疊，每個網域值的元素堆疊會經過重新縮放，總和為 100%。

isStacked 的選項如下：

  • false：元素不會堆疊。這是預設選項。
  • true：在各個網域值中堆疊所有序列的元素。
  • 'percent'：針對每個網域值堆疊所有序列的元素並調整大小，使這些元素總和達到 100%，每個元素的值都算是 100% 的百分比。
  • 'relative'：針對每個網域值堆疊所有序列的元素並調整大小，讓這些元素總和等於 1，而每個元素的值都以 1 的小數計算。
  • 'absolute'：運作方式與 isStacked: true 相同。

如果是 100% 堆疊，每個元素的計算值會顯示在工具提示中的實際值之後。

根據預設，目標軸的刻度值是以相對 0-1 尺度為準，亦即 'relative' 的分數為 1，'percent' 為 0-100% (注意：使用 'percent' 選項時，軸/刻度值會以百分比顯示，但實際值是相對的 0-1 尺度值)。這是因為百分比軸刻點是套用「#.##%」的格式來搭配相對 0-1 尺度值的結果。使用 isStacked: 'percent' 時，請務必使用相對 0-1 縮放值指定任何刻點/格線。您可以使用適當的 hAxis/vAxis 選項自訂格線/刻點值和格式設定。

100% 堆疊僅支援 number 類型的資料值，且基準值必須為零。

類型：布林值/字串
預設值：false
傳說

由成員組成的物件，可設定圖例的各個層面。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型：物件
預設值：null
legend.pageIndex

已為圖例預先選取零開始頁面索引。

類型：數字
預設值：0
legend.position

圖例位置。可以是下列其中一項：

  • 「bottom」- 圖表下方。
  • 'left' - 在圖表左側，左軸沒有任何相關的序列。 因此，如果您想在左側放置圖例，請使用 targetAxisIndex: 1 選項。
  • 「in」 - 圖表內部 (位於圖表左上角)。
  • 「無」- 不顯示圖例。
  • 「right」：圖表右側。與 vAxes 選項不相容。
  • 「top」：圖表上方。
類型：字串
預設值：「right」
legend.alignment

圖例的對齊。可以是下列其中一項：

  • 「開始」：與為圖例分配的區域起點對齊。
  • 「center」：以圖例的分配區域為中心。
  • 「end」：與圖例的分配區域結尾對齊。

起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說，在「右側」圖例中，「start」和「end」分別位於頂端和底部。如果是「頂端」圖例，「start」和「end」則分別位於區域的左側和右側。

預設值取決於圖例位置。「bottom」圖例的預設值為「center」，其他圖例則預設為「start」。

類型：字串
預設：自動
legend.textStyle

指定圖例文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

如果設為 true，則會由下往上繪製序列。預設為由上至下繪製。

類型：布林值
預設值：false
方向

圖表方向。如果設為 'vertical'，系統會旋轉圖表的軸線，讓柱狀圖 (例如) 柱狀圖變為長條圖，而面積圖會向右成長而非向上：

類型：字串
預設：「Horizontal」
系列叢書

物件的陣列，每個物件都會說明圖表中對應序列的格式。如要使用時間序列的預設值，請指定空白物件 {}。如未指定序列或值，則會使用全域值。每個物件都支援下列屬性：

  • annotations - 要套用至這個系列中註解的物件。舉例來說，這可用於控制系列的 textStyle，例如：

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    如需更完整的自訂項目清單，請參閱各種 annotations 選項。

  • color - 此系列使用的顏色。指定有效的 HTML 顏色字串。
  • labelInLegend：要顯示在圖表圖例中的序列說明。
  • targetAxisIndex：這個序列要指派到哪個軸，其中 0 為預設軸，1 為反軸。預設值為 0；設為 1 即可定義根據不同軸顯示不同序列的圖表。至少一個序列會分配給預設軸。您可以為不同軸定義不同的量表。
  • visibleInLegend - 布林值，其中 true 代表序列應有圖例項目，而 false 則表示不應。預設值為 true。

您可以指定物件的陣列，其中每個陣列都會依指定順序套用至系列，或者您可以指定各子項一個數字鍵，代表要套用哪個序列。舉例來說，以下兩個宣告皆相同，並將第一個序列宣告為來自圖例，第 4 個是紅色且從圖例中消失：

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
類型：物件陣列，或含有巢狀物件的物件
預設：{}
主題

主題是一組預先定義的選項值，可搭配運作來達成特定圖表行為或視覺效果。目前只有一個主題：

  • 「最大化」- 將圖表區域最大化，並在圖表區內繪製圖例和所有標籤。設定下列選項： 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
類型：字串
預設值：null
title

顯示在圖表上方的文字。

類型：字串
預設：無標題
titlePosition

圖表標題的放置位置，與圖表區域比較。支援的值：

  • in - 在圖表區域繪製標題。
  • out - 在圖表區域外繪製標題。
  • 無 - 省略標題。
類型：字串
預設值：「out」
titleTextStyle

指定標題文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
工具提示

可讓成員設定各種工具提示元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{textStyle: {color: '#FF0000'}, showColorCode: true}
類型：物件
預設值：null
tooltip.ignoreBounds

如果設為 true，系統就會允許工具提示的繪圖，超出圖表任何邊的邊界。

注意：這僅適用於 HTML 工具提示。透過 SVG 工具提示啟用這項功能時，系統會裁剪圖表邊界外的所有溢位。詳情請參閱「自訂工具提示內容」一文。

類型：布林值
預設值：false
tooltip.isHtml

如果設為 true，將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。

注意：泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。

類型：布林值
預設值：false
tooltip.showColorCode

如為 true，則在工具提示中的系列資料旁邊顯示彩色方塊。在 focusTarget 設為「category」時，預設值為「true」，否則預設值為「false」。

類型：布林值
預設：自動
tooltip.textStyle

指定工具提示文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

觸發工具提示的使用者互動：

  • 「焦點」- 當使用者將遊標懸停在元素上時，就會顯示工具提示。
  • 「無」- 不會顯示工具提示。
  • 「selection」- 使用者選取元素時，系統會顯示工具提示。
類型：字串
預設：「focus」
趨勢線

在支援圖表的圖表中顯示 趨勢線 。根據預設，系統會使用線性趨勢線，但您可以使用 trendlines.n.type 選項自訂這個選項。

趨勢線是以個別系列為依據，因此您的選項在大部分時間看起來會像這樣：

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
類型：物件
預設值：null
trendlines.n.color

趨勢線 的顏色，以英文顏色名稱或十六進位字串表示。

類型：字串
預設：預設系列顏色
trendlines.n.degree

針對 type: 'polynomial' 的 趨勢線 ，多項式的程度 (2 代表二次方，3 代表立方體，以此類推)。(即將推出的 Google 圖表版本將預設等級從 3 變更為 2)。

類型：數字
預設值：3
trendlines.n.labelInLegend

設定後， 趨勢線 會以這個字串顯示在圖例中。

類型：字串
預設值：null
trendlines.n.lineWidth

趨勢線 的線條寬度 (以像素為單位)。

類型：數字
預設值：2
trendlines.n.opacity

趨勢線 的透明度，從 0.0 (透明) 到 1.0 (不透明)。

類型：數字
預設值：1.0
trendlines.n.pointSize

趨勢線 是指在圖表上戳出許多圓點；這個很少需要的選項可讓您自訂圓點的大小。趨勢線的 lineWidth 選項通常較為理想。不過，如果您使用全域 pointSize 選項，且希望趨勢線的點大小不同，就需要這個選項。

類型：數字
預設值：1
trendlines.n.pointsVisible

趨勢線 會在圖表中戳許多圓點。趨勢線的 pointsVisible 選項可決定是否要顯示特定趨勢線的資料點。

類型：布林值
預設值：true
trendlines.n.showR2

是否在圖例或趨勢線工具提示中顯示 決定係數 。

類型：布林值
預設值：false
trendlines.n.type

趨勢線 是否為 'linear' (預設)、'exponential' 或 'polynomial'。

類型：字串
預設：線性
trendlines.n.visibleInLegend

是否在圖例中顯示 趨勢線 。(顯示在趨勢線的工具提示中)。

類型：布林值
預設值：false
vAxis

包含成員的物件，可設定各種垂直軸元素。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
類型：物件
預設值：null
vAxis.baseline

vAxis 屬性，指定縱軸的基準。如果基準大於最高格線大小或小於最低格線，系統會將基準線四捨五入至最接近的格線。

這個選項僅支援 continuous 軸。

類型：數字
預設：自動
vAxis.baselineColor

指定縱軸的基準顏色。可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。

這個選項僅支援 continuous 軸。

類型：數字
預設：「black」
vAxis.direction

垂直軸值成長的方向。根據預設，低值會顯示在圖表底部。指定 -1 將值的順序反轉。

類型：1 或 -1
預設值：1
vAxis.format

數字或日期軸標籤的格式字串。

如為數字軸標籤，這是十進位格式 ICU 模式集 的一部分。舉例來說，{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 萬)

如為日期軸標籤，這是日期格式 ICU 模式集 的一部分。舉例來說，{format:'MMM d, y'} 會顯示「2011 年 7 月 1 日」這個值，代表 2011 年 7 月。

套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。

計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定 format:"#"，但請注意，如果沒有替代項目符合這項條件，系統就不會顯示格線或刻點。

這個選項僅支援 continuous 軸。

類型：字串
預設：自動
vAxis.gridlines

包含成員用來設定縱軸格線的物件。請注意，垂直軸格線是水平繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{color: '#333', minSpacing: 20}

這個選項僅支援 continuous 軸。

類型：物件
預設值：null
vAxis.gridlines.color

圖表區域中的垂直格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：「#CCC」
vAxis.gridlines.count

圖表區域中的水平格線約略數量。 如果為 gridlines.count 指定正數，系統會使用該數字計算格線之間的 minSpacing。 您可以將 1 值指定為只繪製一個格線，指定 0 值則可繪製不繪製格線。指定 -1 (此為預設值)，即可依據其他選項自動計算格線數量。

類型：數字
預設：-1
vAxis.gridlines.units

將日期/日期時間/時間資料類型與圖表計算的格線搭配使用時，覆寫預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
vAxis.minorGridlines

此物件可讓成員在垂直軸上設定次要格線，與 vAxis.gridlines 選項類似。

這個選項僅支援 continuous 軸。

類型：物件
預設值：null
vAxis.minorGridlines.color

圖表區域中的垂直小格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：使用格線與背景顏色混合
vAxis.minorGridlines.count

「orGridlines.count」選項主要已淘汰，除非將計數設為 0 以停用次要格線。次要格線的數量取決於主要格線之間的間隔 (請參閱 vAxis.gridlines.interval) 與最低所需空間 (請參閱 vAxis.minorGridlines.minSpacing)。

類型：數字
預設值：1
vAxis.minorGridlines.units

與計算的次要格線搭配使用時，覆寫日期/日期時間/時間資料類型各個面向的預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
vAxis.logScale

如果設為 true，系統會將垂直軸設為對數尺度。注意：所有值都必須為正數。

這個選項僅支援 continuous 軸。

類型：布林值
預設值：false
vAxis.scaleType

vAxis 屬性，讓垂直軸成為對數尺度。可以是下列任一值：

  • null - 不執行對數縮放。
  • 「log」：對數縮放。系統不會繪製負值和零的值。這個選項與設定 vAxis: { logscale: true } 相同。
  • 「MirrorLog」：繪製負值和零的對數進行對數縮放。負數的繪製值是絕對值記錄檔的負數。接近 0 的值會以線性比例繪製。
類型：字串
預設值：null
vAxis.textPosition

垂直軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。

類型：字串
預設值：「out」
vAxis.textStyle

指定縱軸文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

將自動產生的 Y 軸刻點替換為指定陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件，則應提供用於刻點值的 v 屬性，以及選用的 f 屬性，其中含有要顯示為標籤的常值字串。

除非您指定要覆寫的 viewWindow.min 或 viewWindow.max，否則 viewWindow 會自動展開以包含最小和最大滴答。

例：

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

這個選項僅支援 continuous 軸。

類型：元素陣列
預設：自動
vAxis.title

vAxis 屬性，指定縱軸的標題。

類型：字串
預設：無標題
vAxis.titleTextStyle

指定縱軸標題文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

將垂直軸的最大值移至指定值；在大部分的圖表中，這個值會向上移動。如果設為值小於資料的最大 y 值，系統會忽略這項設定。 vAxis.viewWindow.max 會覆寫這項屬性。

這個選項僅支援 continuous 軸。

類型：數字
預設：自動
vAxis.minValue

將垂直軸的最小值移至指定值；在多數圖表中，這個值會向下移動。如果設定的值大於資料最小 y 值，則系統會忽略這項設定。 vAxis.viewWindow.min 會覆寫這項屬性。

這個選項僅支援 continuous 軸。

類型：數字
預設值：null
vAxis.viewWindowMode

指定如何縮放縱軸，以轉譯圖表區域中的值。支援的字串值如下：

  • 「漂亮」- 縮放垂直值，讓最大和最小值在圖表區域底部和頂端顯示一點。ViewWindow 會展開為最接近的數字主要格線，或找出最接近日期和時間的次要格線。
  • 「maximized」- 縮放垂直值，讓最大值和最小值觸及圖表區域的頂端和底部。這項操作會忽略 vaxis.viewWindow.min 和 vaxis.viewWindow.max。
  • 「explicit」：已淘汰指定圖表區域頂部和底部縮放值的選項。(已淘汰，因為 vaxis.viewWindow.min 和 vaxis.viewWindow.max 是多餘的)。系統會裁剪超出這些值的資料值。您必須指定 vAxis.viewWindow 物件，說明要顯示的最大值和最小值。

這個選項僅支援 continuous 軸。

類型：字串
預設值：等同於「漂亮」，但使用時優先度為 vaxis.viewWindow.min 和 vaxis.viewWindow.max。
vAxis.viewWindow

指定垂直軸的裁剪範圍。

類型：物件
預設值：null
vAxis.viewWindow.max

  • 如果是 continuous 軸：

    要顯示的最大垂直資料值。

  • 如果是 discrete 軸：

    裁剪視窗結束的位置，從零開始的資料列索引。系統會將位於這個索引以上數值的資料點遭到裁剪。加上 vAxis.viewWindowMode.min 可定義半開啟的範圍 [最小值、最大值)，代表要顯示的元素索引。換句話說，所有能夠顯示 min <= index < max 的索引。

當 vAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
vAxis.viewWindow.min

  • 如果是 continuous 軸：

    要顯示的垂直資料最小值。

  • 如果是 discrete 軸：

    以零為基準的列索引，這是裁剪視窗的起始位置。而索引低於這個值的資料點會遭到裁剪。加上 vAxis.viewWindowMode.max 可定義半開啟的範圍 [最小值、最大值)，代表要顯示的元素索引。換句話說，所有能夠顯示 min <= index < max 的索引。當 vAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

當 vAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
寬度

圖表的寬度，以像素為單位。

類型：數字
預設：所含元素的寬度

方法

方法
draw(data, options)

繪製圖表。只有在觸發 ready 事件後，圖表才能接受其他方法呼叫。Extended description。

傳回類型：無
getAction(actionID)

傳回含有要求的 actionID 的工具提示動作物件。

傳回類型：物件
getBoundingBox(id)

傳回包含圖表元素 id 左側、頂端、寬度和高度的物件。尚未記錄 id 的格式 (這些是事件處理常式的傳回值)，但以下提供一些範例：

var cli = chart.getChartLayoutInterface();

圖表區域的高度
cli.getBoundingBox('chartarea').height
長條圖第一連串的第三條長條寬度
cli.getBoundingBox('bar#0#2').width
圓餅圖第五個楔形的定界框
cli.getBoundingBox('slice#4')
垂直 (例如柱狀圖) 圖表資料的定界框：
cli.getBoundingBox('vAxis#0#gridline')
水平 (例如長條圖) 的圖表資料定界框：
cli.getBoundingBox('hAxis#0#gridline')

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getChartAreaBoundingBox()

傳回包含圖表內容左側、頂端、寬度和高度的物件 (即不含標籤和圖例)：

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getChartLayoutInterface()

傳回包含圖表在螢幕上位置相關資訊的物件，以及其元素。

以下方法可在傳回的物件上呼叫：

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getHAxisValue(xPosition, optional_axis_index)

傳回 xPosition 的水平資料值，該值是與圖表容器左側邊緣的像素偏移值。可以是負數。

範例：chart.getChartLayoutInterface().getHAxisValue(400)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getImageURI()

傳回已序列化為圖片 URI 的圖表。

請在繪製圖表「之後」呼叫此動作。

請參閱列印 PNG 圖表。

傳回類型：字串
getSelection()

傳回所選圖表實體的陣列。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，無論何時都只能選取一個實體。 Extended description 。

傳回類型：選取元素的陣列
getVAxisValue(yPosition, optional_axis_index)

傳回位於 yPosition 的垂直資料值，該值為與圖表容器頂部邊緣往下的像素偏移。可以是負數。

範例：chart.getChartLayoutInterface().getVAxisValue(300)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getXLocation(dataValue, optional_axis_index)

傳回相對於圖表容器左側邊緣的 dataValue 像素 X 座標。

範例：chart.getChartLayoutInterface().getXLocation(400)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getYLocation(dataValue, optional_axis_index)

傳回相對於圖表容器頂部邊緣的 dataValue 像素 y 座標。

範例：chart.getChartLayoutInterface().getYLocation(300)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
removeAction(actionID)

從圖表中移除要求 actionID 的工具提示動作。

傳回類型： none
setAction(action)

設定在使用者點選動作文字時執行的工具提示動作。

setAction 方法會將物件做為動作參數。這個物件應指定 3 個屬性：id (所設定動作的 ID)、text (應顯示在動作工具提示中的文字) 和 action (使用者按一下動作文字時應執行的函式)。

請在呼叫圖表的 draw() 方法之前，設定所有及所有工具提示動作。延伸說明。

傳回類型： none
setSelection()

選取指定的圖表實體。取消先前選取的任何項目。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，一次只能選取一個實體。 Extended description 。

傳回類型：無
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無

事件

如要進一步瞭解如何使用這些事件，請參閱基本互動、處理事件和觸發事件。

名稱
animationfinish

轉場動畫播放完畢時觸發。

屬性：無
click

使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。

屬性： targetID
error

嘗試算繪圖表時發生錯誤時觸發。

屬性：ID、訊息
legendpagination

使用者按一下圖例分頁箭頭時觸發。傳回目前從零開始計算的圖例索引和總頁數。

資源：currentPageIndex、totalPages
onmouseover

在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。 長條與資料表中的儲存格、資料欄的圖例項目 (資料列索引為空值) 和資料列類別 (欄索引為空值) 相關聯。

屬性：列、欄
onmouseout

在使用者滑鼠遊標移離視覺實體時觸發。回傳對應資料表元素的列和欄索引。 長條與資料表中的儲存格、資料欄的圖例項目 (資料列索引為空值) 和資料列類別 (欄索引為空值) 相關聯。

屬性：列、欄
ready

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無
select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。