視覺化：散佈圖 (original) (raw)

跳至主要內容

• 首頁

• 指南

• 參考資料

• 支援

• 總覽

• 哈囉，排行榜！

  • 快速入門導覽課程
  • 載入圖表庫
  • 準備資料
  • 自訂圖表
  • 繪製圖表
  • 繪製多個圖表

• 圖表類型

  • 圖表庫
  • 註解圖表
  • 面積圖
  • 長條圖
  • 泡泡圖
  • 日曆圖表
  • 枝狀圖
  • 柱狀圖
  • 組合圖
  • 差異比較表
  • 圓環圖
  • 甘特圖騰
  • 度量圖
  • 地理圖
  • 直方圖
  • 間隔
  • 折線圖
  • 地圖介面集
  • 組織圖
  • 圓餅圖
  • 三角洲圖表
  • 散佈圖
  • 階梯狀圖
  • 表格
  • 時程
  • 樹狀圖
  • 趨勢線
  • 素食圖表
  • 刊登序列圖表
  • 字詞樹
  • 其他範例

• 如何繪製圖表

  • 簡介
  • 圖表.draw()
  • 夏令燈
  • 增加互動性
  • 如何使用試算表與圖表
  • 如何列印 PNG

• 進階用法

  • 如何自訂圖表
  • 軸選項
  • 如何建立新的圖表類型
  • 十字繡
  • 格式設定工具
  • 路線
  • 重疊廣告
  • 點數
  • 工具提示
  • 開發工具

• 與圖表互動

  • 事件
  • 動畫
  • 控制項和資訊主頁
  • 工具列
  • 圖表編輯器

• 圖表資料

  • DataTables 和 DataView
  • 資料角色
  • 日期和時間
  • 如何連結資料庫
  • 擷取其他來源的圖表資料
  • 擷取 Google 試算表中的資料
  • 如何導入新資料來源類型

視覺化：散佈圖

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

總覽

散佈圖會在圖表上標出資料點。使用者將遊標懸停在資料點上時，系統就會顯示工具提示，並提供更多資訊。

視瀏覽器功能而定，Google 散佈圖會在瀏覽器中使用 SVG 或 VML 算繪。

範例

建立 Material 散佈圖

Google 在 2014 年公布了相關規範，讓 Google 平台提供的各種資源和應用程式 (例如 Android 應用程式) 能夠提供一致的外觀和風格。這項作業稱為「_Material Design_」。我們將提供所有核心圖表的「Material」版本；如果您需要，歡迎繼續使用。

建立材質散佈圖表與建立「傳統」散佈圖的做法類似，您會載入 Google Visualization API (雖然使用 'scatter' 套件而非 'corechart' 套件)、定義資料表，然後建立物件 (但類別不是 google.charts.Scatter，而不是 google.visualization.ScatterChart)。

注意：舊版 Internet Explorer 不支援 Material 圖表。(IE8 以下版本不支援 SVG，Material 圖表需要此格式)。

與傳統散佈圖相比，「材質散佈圖表」有多項小幅改善，包括可因應重疊點的可變透明度、改善調色盤、標籤格式更清晰、預設間距、更柔和的格線和標題 (以及新增字幕)。

  google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart () {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 67], [1, 88], [2, 77],
      [3, 93], [4, 85], [5, 91],
      [6, 71], [7, 78], [8, 93],
      [9, 80], [10, 82],[0, 75],
      [5, 80], [3, 90], [1, 72],
      [5, 75], [6, 68], [7, 98],
      [3, 82], [9, 94], [2, 79],
      [2, 95], [2, 86], [3, 67],
      [4, 60], [2, 80], [6, 92],
      [2, 81], [8, 79], [9, 83],
      [3, 75], [1, 80], [3, 71],
      [3, 89], [4, 92], [5, 85],
      [6, 92], [7, 78], [6, 95],
      [3, 81], [0, 64], [4, 85],
      [2, 83], [3, 96], [4, 77],
      [5, 89], [4, 89], [7, 84],
      [4, 92], [9, 98]
    ]);

    var options = {
      width: 800,
      height: 500,
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      hAxis: {title: 'Hours Studied'},
      vAxis: {title: 'Grade'}
    };

    var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }

Material 圖表目前為 Beta 版。外觀和互動功能基本上是最終版本，但許多傳統圖表尚未提供可用選項。如需目前不支援的選項清單，請參閱這個問題。

此外，宣告選項的方式尚未定案，因此如果你使用的是任何傳統選項，就必須將以下行取代為 Material 選項：

chart.draw(data, options);

...包含以下內容：

chart.draw(data, **google.charts.Scatter.convertOptions(options));**

2-Y 圖表

有時您會想在散佈圖中顯示兩個序列，其中包含兩個獨立的 Y 軸：一個序列的左軸，另一個則用右軸：

請注意，我們不僅是兩個 Y 軸不同的標記 (「期末成績」和「受訓時數」)，也分別有各自的評分標準和格線。如要自訂這項行為，請使用 vAxis.gridlines 選項。

在下方程式碼中，axes 和 series 選項會指定圖表的雙 Y 外觀。series 選項會指定每個座標要使用的軸 ('final grade' 和 'hours studied'；不需要與資料表中的資料欄名稱建立任何關係)。接著，axes 選項會將這張圖表設為雙 Y 圖表，將 'Final Exam Grade' 軸放在左側和右側 'Hours Studied' 軸。

  google.charts.load('current', {'packages':['corechart', 'scatter']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Student ID');
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
      [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
      [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
      [9, 9, 80],  [10, 10, 82], [11, 0, 75],
      [12, 5, 80], [13, 3, 90],  [14, 1, 72],
      [15, 5, 75], [16, 6, 68],  [17, 7, 98],
      [18, 3, 82], [19, 9, 94],  [20, 2, 79],
      [21, 2, 95], [22, 2, 86],  [23, 3, 67],
      [24, 4, 60], [25, 2, 80],  [26, 6, 92],
      [27, 2, 81], [28, 8, 79],  [29, 9, 83]
    ]);

    var materialOptions = {
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      width: 800,
      height: 500,
      series: {
        0: {axis: 'hours studied'},
        1: {axis: 'final grade'}
      },
      axes: {
        y: {
          'hours studied': {label: 'Hours Studied'},
          'final grade': {label: 'Final Exam Grade'}
        }
      }
    };

    var classicOptions = {
      width: 800,
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1}
      },
      title: 'Students\' Final Grades - based on hours studied',

      vAxes: {
        // Adds titles to each axis.
        0: {title: 'Hours Studied'},
        1: {title: 'Final Exam Grade'}
      }
    };

    function drawMaterialChart() {
      var materialChart = new google.charts.Scatter(chartDiv);
      materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
      button.innerText = 'Change to Classic';
      button.onclick = drawClassicChart;
    }

    function drawClassicChart() {
      var classicChart = new google.visualization.ScatterChart(chartDiv);
      classicChart.draw(data, classicOptions);
      button.innerText = 'Change to Material';
      button.onclick = drawMaterialChart;
    }

    drawMaterialChart();
};

「Top-X」圖表

注意：Top-X 軸僅適用於 Material 圖表 (也就是含有 scatter 套件的軸)。

如果您想將 X 軸標籤和標題置於圖表頂端而非底部，可以使用 axes.x 選項在 Material 圖表中執行這項操作：

  google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart () {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 67],  [1, 88],  [2, 77],
      [3, 93],  [4, 85],  [5, 91],
      [6, 71],  [7, 78],  [8, 93],
      [9, 80],  [10, 82], [0, 75],
      [5, 80],  [3, 90],  [1, 72],
      [5, 75],  [6, 68],  [7, 98],
      [3, 82],  [9, 94],  [2, 79],
      [2, 95],  [2, 86],  [3, 67],
      [4, 60],  [2, 80],  [6, 92],
      [2, 81],  [8, 79],  [9, 83],
      [3, 75],  [1, 80],  [3, 71],
      [3, 89],  [4, 92],  [5, 85],
      [6, 92],  [7, 78],  [6, 95],
      [3, 81],  [0, 64],  [4, 85],
      [2, 83],  [3, 96],  [4, 77],
      [5, 89],  [4, 89],  [7, 84],
      [4, 92],  [9, 98]
    ]);

    var options = {
      width: 800,
      height: 500,
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      axes: {
        x: {
          0: {side: 'top'}
        }
      }
    };

    var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }

載入中

google.charts.load 套件名稱為 "corechart"，視覺化的類別名稱為 google.visualization.ScatterChart。

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

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

質感散佈圖表，google.charts.load 套件名稱為 "scatter"，視覺化的類別名稱為 google.charts.Scatter。

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

var visualization = new google.charts.Scatter(container);

資料格式

資料列：表格中的每一列都代表一組 x 軸值相同的資料點。

資料欄：

| | 第 0 欄 | 第 1 欄 | ... | 第 N 欄 | | | -------------------------------------------------------------------------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 用途： | 資料點 X 值 | 序列 1 Y 值 | ... | 序列 N Y 值 | | 資料類型： | 字串、數字或日期/日期/時間/時間 | 字串、數字或日期/日期/時間/時間 | ... | 字串、數字或日期/日期/時間/時間 | | 角色： | 資料 | 資料 | ... | 資料 | | 選用的資料欄角色： | 無 | 強調 範圍 工具提示 | ... | 強調 範圍 風格 工具提示 |

如要指定多個序列，請指定兩個以上的 Y 軸欄，且只在一個 Y 欄中指定 Y 值：

設定選項

方法

事件

如要進一步瞭解如何使用這些事件，請參閱基本互動、處理事件和觸發事件。

資料政策

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

除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。

上次更新時間：2024-07-10 (世界標準時間)。