視覺化：柱狀圖 (舊版)

已淘汰

這個圖表已由新版本取代，請改用該版本。如需輕鬆遷移，請參閱版本資訊頁面。

  1. Overview
  2. 範例
  3. 載入中
  4. 資料格式
  5. 設定選項
  6. 方法
  7. 事件
  8. 資料政策

總覽

使用 SVG 或 VML 在瀏覽器中算繪的垂直長條圖。點按點即可查看提示。按一下圖例項目時，即可為線條加上動畫效果。如需此圖表的水平版本，請參閱長條圖。

簽署人：Google

範例

自行使用視覺化 Playground 編寫程式碼

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

載入中

google.load 套件名稱為 "columnchart" 

  google.load("visualization", "1", {packages: ["columnchart"]});

視覺呈現的類別名稱為 google.visualization.ColumnChart

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

資料格式

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

資料表中的第一欄應為字串，代表該長條群組的標籤。後續欄的數量不限，均為數字，每個數值都代表各群組中具有相同顏色和相對位置的長條。

位於特定資料列和資料欄的值會決定該列與欄所代表單一長條的高度。

設定選項

名稱 類型 預設 說明
axisColor 字串或物件 預設顏色 軸的顏色。 可能的值會是 backgroundColor 設定選項的值。
axisBackgroundColor 字串或物件 預設顏色 軸背景的邊框。可能的值會是 backgroundColor 設定選項的值。
axisFontSize 號碼 自動 圖表軸文字的字型大小 (以像素為單位)。
backgroundColor 字串或物件 預設顏色 圖表主要區域的背景顏色。可能是下列其中一個選項：
  • 由 HTML 支援顏色的字串，例如「red」或「#00cc00」
  • 具有 stroke fill 和 strokeSize 屬性的物件。stroke 和 fill 應為有顏色的字串。strokeSize 為數字。例如：{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。如果只要在不填色的情況下直接填滿，請使用 stroke:null, strokeSize: 0。
borderColor 字串或物件 預設顏色 圖表元素的邊框。 可能的值會是 backgroundColor 設定選項的值。
顏色 字串或物件的陣列 預設色彩

顏色陣列，其中每個元素都指定一個序列的顏色。您應該為每個序列指定一個陣列元素。

  • 如果是 is3D=false，則這是 HTML 顏色的陣列。範例：color:['#00FF00','orange']
  • 如果設為 is3D=true，則是 HTML 顏色或此類型的物件：{color:face_color, darker:shade_color}，其中 color 是元素的錶面顏色，darker 則是陰影顏色。 不過，如果您為 3D 物件指定 HTML 顏色，臉孔和色調都會設為相同的顏色，並降低 3D 效果。範例：{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true 如果設為 true，則在使用者點選資料欄時會顯示工具提示。
focusBorderColor 字串或物件 預設顏色 聚焦元素 (以滑鼠指向) 的圖表元素邊框。 可能的值會是 backgroundColor 設定選項的值。
高度 號碼 容器高度 圖表的高度 (以像素為單位)。
是 3D boolean false 如果設為 True，則會顯示 3D 變更。
isStacked boolean false 如果設為 True，線條值就會堆疊 (累計)。
傳說 字串 「右」 圖例位置和類型。可能是下列其中一個值：
  • 「right」：圖表右側。
  • 「left」- 位於圖表左側。
  • 「top」：圖表上方。
  • 「bottom」- 圖表下方。
  • 「無」- 不顯示圖例。
legendBackgroundColor 字串或物件 預設顏色 圖表圖例區域的背景顏色。可能的值會是 backgroundColor 設定選項的值。
legendFontSize 號碼 自動 圖例字型的大小 (以像素為單位)。
legendTextColor 字串或物件 預設顏色 圖例文字項目的顏色。 可能的值會是 backgroundColor 設定選項的值。
logScale boolean false 如果設為 true，主軸應以對數方式縮放。
max 號碼 自動 指定最高 Y 軸格線線。實際格線將與下列兩個值取較大的值：最大值或最高的資料值，並四捨五入至下一個較高格狀標記。
分鐘 號碼 自動 指定最低的 Y 軸格線線。實際格線將為兩個值較低的兩個值：最小值或最低資料值，無條件捨去至下一個較低格狀標記。
reverseAxis boolean false 如果設為 true，則系統會由右至左繪製類別。預設為從左到右繪製。
showCategories boolean true 設為 true 時，系統會顯示類別標籤。如果為 false，則不會。
title 字串 無標題 顯示在圖表上方的文字。
titleX 字串 無標題 顯示在橫軸下方的文字。
titleY 字串 無標題 要依縱軸顯示的文字。
titleColor 字串或物件 預設顏色 圖表標題的顏色。 可能的值會是 backgroundColor 設定選項的值。
titleFontSize 號碼 自動 圖表標題的字型大小 (以像素為單位)。

tooltipFontSize		 號碼 11 工具提示文字的字型大小。如果工具提示太小，無法容納指定字型中的文字，這個可能就會減少。
tooltipHeight
 號碼 60 工具提示的高度，以像素為單位。工具提示高度是固定的，絕不會配合文字的長度或字型大小而放大或縮小。但圖表高度超過 1/3 時，圖表高度會遭到裁剪。
tooltipWidth 號碼 120 工具提示的寬度 (以像素為單位)。工具提示的寬度是固定的，絕不會配合文字的長度或字型大小而放大或縮小。但超過圖表寬度的任何元素都會遭到裁剪。
寬度 號碼 容器寬度 圖表的寬度 (以像素為單位)。

方法

方法 傳回類型 說明
draw(data, options) 無 繪製圖表。
getSelection() 選取元素陣列 標準 getSelection() 實作。所選元素為資料欄和儲存格元素。使用者一次只能選取一個資料欄或儲存格。
setSelection() 無 標準 setSelection() 實作，但僅支援選取一個元素。將每個選取項目視為資料欄或儲存格選項。請注意，您無法選取標籤欄。

事件

名稱 說明 屬性
onmouseover 在使用者將滑鼠遊標懸停在長條上，並傳入相應儲存格的列和欄索引時觸發。 列，欄
onmouseout 在使用者滑鼠遊標離開長條，並傳入對應儲存格的列和欄索引時觸發。 列，欄
ready 圖表已可供外部方法呼叫。如果您想與圖表互動，以及在繪製圖表後呼叫方法，您應「先」為此事件設定事件監聽器，再呼叫 draw 方法，而且只在事件觸發後呼叫這些事件監聽器。 無
select 在使用者點選長條或圖例時觸發。選取長條後，系統會選取資料表中的對應儲存格；選取圖例時，系統會選取資料表中的對應資料欄。如要瞭解您選取的項目，請呼叫 getSelection()。 無

資料政策

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