本頁面由 Cloud Translation API 翻譯而成。

圖表：散佈圖 (舊版)

已淘汰

這個視覺化圖表已由新版本取代，請改用替代圖表。如要輕鬆遷移，請參閱版本資訊頁面。

總覽
示例
載入中
資料格式
設定選項
方法
事件
資料政策

簡介

使用 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:["scatterchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5});
      }
    </script>
  </head>

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

載入中

google.load 套件名稱為 "scatterchart"

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

視覺化的類別名稱是 google.visualization.ScatterChart

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

資料格式

您必須提供兩個以上的資料欄，且所有資料欄都必須為數值。第一欄的值將用於 X 軸。下列資料欄中的值會用於 Y 軸。每個資料欄都會顯示不同的顏色。

X 軸顯示的最小值和最大值是資料表中 X 的最小值和最大值。如要強制顯示額外的值，使其低於或高於這些值，請新增 X 值小於或高於最大資料值的資料列，且不要在資料列中指定 Y 值。您可以透過這種方式，新增最小、最大或兩個值的資料列。

設定選項

名稱	類型	預設	說明
軸顏色	字串或物件	預設顏色	軸的色彩。可能的值包括 backgroundColor 設定選項的值。
軸背景色彩	字串或物件	預設顏色	環繞軸背景的邊框。可能的值包括 backgroundColor 設定選項的值。
軸字型大小	數字	自動	圖表軸文字的字型大小 (以像素為單位)。
backgroundColor	字串或物件	預設顏色	圖表主要區域的背景顏色。可能為下列其中一個選項： HTML 支援的色彩字串 (例如「red」或「#00cc00」) 包含 `stroke` `fill` 和 `strokeSize` 屬性的物件。 `stroke` 和 `fill` 應為顏色字串。筆劃大小須為數字。例如：`{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`。如果只要填滿，就不用使用筆觸，請使用 `stroke:null, strokeSize: 0`。
框線顏色	字串或物件	預設顏色	圖表元素的邊框。可能的值包括 backgroundColor 設定選項的值。
顏色	字串陣列	預設色彩	圖表元素的顏色。字串陣列。每個元素都是字串，也就是 HTML 支援的顏色，例如「red」或「#00cc00」。
啟用工具提示	布林值	true	如果設為 true，系統會在使用者點選資料點時顯示工具提示。
焦點框線顏色	字串或物件	預設顏色	焦點位於圖表元素周圍的邊框 (滑鼠遊標指向)。可能的值包括 backgroundColor 設定選項的值。
height	數字	容器高度	圖表的高度，以像素為單位。
傳說	string	「右」	圖例的位置和類型。可能是下列其中一個值：「右」：在圖表右側。「left」：圖表左邊。「top」：圖表上方。 'bottom' - 圖表下方。「無」：不顯示圖例。
圖例背景色彩	字串或物件	預設顏色	圖表圖例區域的背景顏色。可能的值包括 backgroundColor 設定選項的值。
圖例大小	數字	自動	圖例字型大小，以像素為單位。
圖例文字顏色	字串或物件	預設顏色	圖例文字顏色。可能的值包括 backgroundColor 設定選項的值。
線條大小	數字	0	線條寬度 (單位為像素)。以正數值表示同一資料欄內所有資料點之間的一行。
logScale	布林值	否	如為 true，Y 軸應以對數縮放。
logScaleX	布林值	否	如為 true，X 軸應以對數縮放。
最高	數字	自動	指定 Y 軸的最高格線。實際格線會納入兩個值中較大的值：最大選項值或最高資料值，無條件進位至下一個格狀標記。
分	數字	自動	指定最低的 Y 軸格線。實際格線是兩個值的下限：最小值選項值或最低資料值，無條件捨去至下一個格狀標記。
PointSize	數字	3	顯示點的大小 (以像素為單位)。
title	string	無標題	圖表上方顯示的文字。
標題 X	string	無標題	顯示在水平軸下方的文字。
標題 Y	string	無標題	垂直軸顯示的文字。
title 顏色	字串或物件	預設顏色	圖表標題的顏色。可能的值包括 backgroundColor 設定選項的值。
title 字型大小	數字	自動	圖表標題的字型大小 (以像素為單位)。
tooltipFontSize	數字	11	工具提示文字的字型大小。如果工具提示過小，無法容納指定字型的文字，則可能會減少上述情形。
工具提示高度	數字	60	工具提示的高度 (以像素為單位)。工具提示高度是固定的，不會隨文字長度或字型大小而擴大或縮小。但系統會將超過 1/3 的所有圖表高度裁剪。
工具提示寬度	數字	120	工具提示的寬度 (以像素為單位)。工具提示寬度是固定的，不會隨文字長度或字型大小而擴大或縮小。但系統會將超過圖表寬度的內容全部裁剪。
width	數字	容器寬度	圖表的寬度 (以像素為單位)。

方法

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

活動

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

資料政策

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