視覺化：走勢線 (圖片)

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

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

總覽

使用 Google Charts API 以圖片算繪的單一或多個波形圖。圖片包含在 HTML 表格中。

範例

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "imagesparkline"。

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

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

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

資料格式

資料欄數量不限。所有欄皆須為數字。 每一欄都會以單一波形圖顯示。

設定選項

名稱 類型 預設 說明
顏色 字串 指定要用於所有圖表的顏色。 採用 #rrggbb 格式的字串。例如「#00cc00」。 僅在未指定 colors 選項時使用。
顏色 字串陣列 預設色彩 資料欄使用的顏色。 此字串陣列，其中每個元素都是一個字串，格式為 #rrggbb。 例如「#00cc00」。 顏色 i 代表資料欄 i。 如果顏色數量少於欄數，顏色選擇範圍就會環繞。
填滿 boolean false 如果設為 true，則會填滿線條下方的顏色。
高度 號碼 容器高度 圖片的高度，以像素為單位。
labelPosition 字串 無 標籤位置。支援的值為「none」、「left」、「right」。
max 數字陣列 每個走勢圖的最大資料值 各波形圖資料值範圍的最高值。 陣列中的索引必須與資料表中的欄索引相符。 如果所有值皆為空值，這個屬性就是序列中的最大值。
分鐘 數字陣列 每個走勢圖的最小值資料值 每個走勢圖資料值範圍的最低值。 陣列中的索引必須與資料表中的欄索引相符。 如果所有值皆為空值，這會是序列中的最小值。
showAxisLines boolean true 如果設為 true，則會顯示軸線。如果不是，則為 false，而 showValueLabels 預設為 false。
showValueLabels boolean true，但 showAxisLines 為 false 時除外。 如果設為 true，系統會顯示值軸標籤。
title 字串陣列 未顯示任何標題 每個走勢圖要使用的標題。
寬度 號碼 容器寬度 圖表的寬度，以像素為單位。
版面配置 字串 「v」 垂直或水平版面配置：「v」代表垂直，「h」代表水平。

方法

方法 傳回類型 說明
draw(data, options) 無 繪製圖表。
getSelection() 選取元素陣列 以物件陣列的形式，傳回所選圖表的索引。每個物件都有一個資料欄屬性，其中包含所選波形的欄編號。可傳回多個所選項目。
setSelection(selection) 無 選取指定的波形，並取消選取任何未指定的波形圖。選取是物件的陣列，每個物件都包含數字 column 屬性，該屬性是所選波形圖的索引。詳情請參閱 setSelection()。

事件

名稱 說明 屬性
選取 標準選取事件。 無

資料政策

請參閱「圖表 API 記錄政策」。