重要事項:Google 圖表工具的「圖片圖表」部分已自 2012 年 4 月 20 日起正式淘汰。但請放心,該功能將根據淘汰政策持續運作。
總覽
使用 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 記錄政策」。