視覺化：長條圖 (圖片)

重要事項：Google 圖表工具的「圖片圖表」部分已自 2012 年 4 月 20 日起正式淘汰。但請放心，該功能將根據淘汰政策持續運作。

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

總覽

使用 Google Charts API 顯示為圖片的長條圖。

範例

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagebarchart"]});
      google.charts.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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "imagebarchart" 

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

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

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

資料格式

第一欄應為字串且包含類別標籤，可追蹤的欄數量不限，所有欄都必須為數字。 每個資料欄都會以一組長條顯示。當資料表包含多個數字欄時，每一列的值會顯示為堆疊長條。

設定選項

名稱 類型 預設 說明
backgroundColor 字串 「#FFFFFF」(白色) 圖表 API 顏色格式的圖表背景顏色。
顏色 陣列<字串> 自動 藉此為各個資料序列指定特定顏色。您可以使用圖表 API 顏色格式指定顏色。顏色 i 會用於資料欄 i，如果資料欄超過顏色，則會從頭到頭換行。如果所有系列都接受單一顏色的變化版本，請改用 color 選項。
enableEvents boolean false 讓圖表擲回使用者觸發的事件，例如點擊或滑鼠遊標懸停。僅支援特定圖表類型。請參閱下方的「事件」一節。
高度 號碼 容器高度 圖表的高度 (以像素為單位)。
isStacked boolean true 控制多個資料欄是否會以堆疊長條圖的形式顯示，而非分組長條。
isVertical boolean false 控制長條是否垂直。
傳說 字串 「右」 圖例位置和類型。可能是下列其中一個值：
  • 「right」：圖表右側。
  • 「left」- 位於圖表左側。
  • 「top」：圖表上方。
  • 「bottom」- 圖表下方。
  • 「無」- 不顯示圖例。
max 號碼 自動 Y 軸中顯示的最大值。
分鐘 號碼 自動 Y 軸顯示的最低值。
showCategoryLabels boolean true 如果設為 false，則移除類別標籤。
showValueLabels boolean true 如果設為 false，則移除值的標籤。
title 字串 無標題 顯示在圖表上方的文字。
valueLabelsInterval 號碼 自動 值軸標籤的顯示間隔。舉例來說，如果 min 為 0，max 為 100，而 valueLabelsInterval 為 20，圖表就會顯示軸標籤如下 (0、20、40、60、80 100)。
寬度 號碼 容器寬度 圖表的寬度 (以像素為單位)。

方法

方法 傳回類型 說明
draw(data, options) 無 繪製圖表。

事件

您可以註冊聆聽一般圖片圖表網頁中所述的事件。

資料政策

請參閱圖表 API 記錄政策。