長條圖 (original) (raw)

跳至主要內容

長條圖

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

總覽

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 (第一個使用英文名稱，第二個使用 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 來指定每個長條的註解。

為了要採用不同的格式設定值，我們可以定義 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)。

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