Google Charts 快速指南

Google Charts - 概述

Google Charts 是一個基於純 JavaScript 的圖表庫，旨在透過新增互動式圖表功能來增強 Web 應用程式。它支援各種圖表。圖表使用 SVG 在 Chrome、Firefox、Safari、Internet Explorer (IE) 等標準瀏覽器中繪製。在舊版 IE 6 中，使用 VML 繪製圖形。

特性

以下是 Google Charts 庫的主要特性。

相容性 - 在所有主流瀏覽器和移動平臺（如 Android 和 iOS）上都能完美執行。
多點觸控支援 - 支援 Android 和 iOS 等觸控式螢幕平臺上的多點觸控。非常適合 iPhone/iPad 和基於 Android 的智慧手機和平板電腦。
免費使用 - 開源且可免費用於非商業用途。
輕量級 - loader.js 核心庫是一個極其輕量級的庫。
簡單的配置 - 使用 JSON 定義各種圖表配置，非常易於學習和使用。
動態 - 允許在圖表生成後修改圖表。
多軸 - 不僅限於 x 軸和 y 軸。支援圖表上的多軸。
可配置的工具提示 - 當用戶將滑鼠懸停在圖表上的任何點時，會出現工具提示。googlecharts 提供內建格式化程式或回撥格式化程式來以程式設計方式控制工具提示。
日期時間支援 - 特殊處理日期時間。提供許多內建控制元件來控制日期類別。
列印 - 使用網頁列印圖表。
外部資料 - 支援從伺服器動態載入資料。使用回撥函式控制資料。
文字旋轉 - 支援任何方向的標籤旋轉。

支援的圖表型別

Google Charts 庫提供以下型別的圖表：

序號	圖表型別和描述
1	折線圖用於繪製基於線/樣條線的圖表。
2	面積圖用於繪製基於區域的圖表。
3	餅圖用於繪製餅圖。
4	Sankey 圖、散點圖、階梯面積圖、表格圖、時間軸圖、樹狀圖、趨勢線圖用於繪製散點圖。
5	氣泡圖用於繪製基於氣泡的圖表。
6	動態圖表用於繪製動態圖表，使用者可以修改圖表。
7	組合圖用於繪製各種圖表的組合。
8	3D 圖表用於繪製 3D 圖表。
9	角度儀表用於繪製速度表型別的圖表。
10	熱力圖用於繪製熱力圖。
11	樹狀圖用於繪製樹狀圖。

在接下來的章節中，我們將詳細討論上述每種型別的圖表，並提供示例。

許可證

Google Charts 是開源的，可免費使用。請訪問以下連結：服務條款。

Google Charts - 環境設定

本章將討論如何在 Web 應用程式開發中設定 Google Charts 庫。

安裝 Google Charts

有兩種方法可以使用 Google Charts。

下載 - 從 https://developers.google.com/chart 本地下載並使用它。
CDN 訪問 - 您還可以訪問 CDN。CDN 將使您能夠訪問全球各地的區域資料中心，在本例中，Google Chart 託管在 https://www.gstatic.com/charts。

使用下載的 Google Chart

使用以下指令碼在 HTML 頁面中包含 googlecharts JavaScript 檔案：

<head>
   <script src = "/googlecharts/loader.js"></script>
</head>

使用 CDN

在本教程中，我們始終使用 Google Chart 庫的 CDN 版本。

使用以下指令碼在 HTML 頁面中包含 Google Chart JavaScript 檔案：

<head>
   <script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>

Google Charts - 配置語法

本章將展示使用 Google Chart API 繪製圖表所需的配置。

步驟 1：建立 HTML 頁面

建立一個包含 Google Chart 庫的 HTML 頁面。

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
   </body>
</html>

這裡的 container div 用於包含使用 Google Chart 庫繪製的圖表。這裡我們使用 google.charts.load 方法載入最新版本的 corecharts API。

步驟 2：建立配置

Google Chart 庫使用非常簡單的 JSON 語法配置。

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

這裡 data 表示 JSON 資料，options 表示 Google Chart 庫用於使用 draw() 方法在 container div 中繪製圖表的配置。現在我們將配置各種引數來建立所需的 JSON 字串。

標題

配置圖表的選項。

// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
   'width':550,
   'height':400};

資料表

配置要顯示在圖表上的資料。資料表是一個特殊的表格結構集合，包含圖表的 data。資料表的列表示圖例，行表示相應的資料。addColumn() 方法用於新增列，其中第一個引數表示資料型別，第二個引數表示圖例。addRows() 方法用於相應地新增行。

// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7]
]);

步驟 3：繪製圖表

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

示例

以下是完整的示例：

googlecharts_configuration.htm

線上演示

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

以下程式碼呼叫 drawChart 函式，在 Google Chart 庫完全載入後繪製圖表。

google.charts.setOnLoadCallback(drawChart);

結果

驗證結果。

Google Charts - 面積圖

面積圖用於繪製基於區域的圖表。在本節中，我們將討論以下型別的基於區域的圖表。

序號	圖表型別和描述
1	基本面積圖基本面積圖
2	帶有負值的面積圖具有負值的面積圖。
3	堆疊面積圖圖表具有相互堆疊的區域。
4	百分比面積圖資料以百分比表示的圖表。
5	缺少點的面積圖資料中缺少點的圖表。
6	反轉軸使用反轉軸的面積圖。

Google Charts - 柱狀圖

柱狀圖用於繪製基於柱狀的圖表。在本節中，我們將討論以下型別的基於柱狀的圖表。

序號	圖表型別和描述
1	基本柱狀圖基本柱狀圖
2	分組柱狀圖分組柱狀圖。
3	堆疊柱狀圖圖表具有相互堆疊的柱狀。
4	負堆疊柱狀圖帶有負堆疊的柱狀圖。
5	百分比堆疊柱狀圖資料以百分比表示的柱狀圖。
6	Material 柱狀圖受 Material Design 啟發的柱狀圖。
7	帶有資料標籤的柱狀圖帶有資料標籤的柱狀圖。

Google Charts - 氣泡圖

氣泡圖用於繪製基於氣泡的圖表。在本節中，我們將討論以下型別的基於氣泡的圖表。

序號	圖表型別和描述
1	基本氣泡圖基本氣泡圖。
2	帶有資料標籤的氣泡圖帶有資料標籤的氣泡圖。

Google Charts - 日曆圖

日曆圖用於繪製長時間跨度（例如月份或年份）內的活動。在本節中，我們將討論以下型別的基於日曆的圖表。

序號	圖表型別和描述
1	基本日曆圖基本日曆圖。
2	帶有自定義顏色的日曆圖自定義日曆圖。

Google Charts - K 線圖

K 線圖用於顯示某個值的開盤價和收盤價以及價值差異，通常用於表示股票。在本節中，我們將討論以下型別的基於 K 線的圖表。

序號	圖表型別和描述
1	基本 K 線圖基本 K 線圖。
2	帶有自定義顏色的 K 線圖自定義 K 線圖。

Google Charts - 條形圖

條形圖用於繪製基於條形的圖表。在本節中，我們將討論以下型別的基於條形的圖表。

序號	圖表型別和描述
1	基本條形圖基本條形圖。
2	分組條形圖分組條形圖。
3	堆疊條形圖圖表具有相互堆疊的條形。
4	負堆疊條形圖帶有負堆疊的條形圖。
5	百分比堆疊條形圖資料以百分比表示的條形圖。
6	Material 條形圖受 Material Design 啟發的條形圖。
7	帶有資料標籤的條形圖帶有資料標籤的條形圖。

Google Charts - 組合圖

組合圖有助於將每個序列呈現為以下列表中的不同標記型別：折線、面積圖、柱狀圖、K 線圖和階梯面積圖。要為序列分配預設標記型別，請使用 seriesType 屬性。Series 屬性用於單獨指定每個序列的屬性。我們已經在 Google Charts 配置語法一章中看到了用於繪製此圖表的配置。因此，讓我們看看完整的示例。

配置

我們使用 ComboChart 類來顯示組合圖表。

//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));

示例

googlecharts_combination_chart.htm

線上演示

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Fruit', 'Jane', 'John', 'Average'],
               ['Apples', 3, 2, 2.5],
               ['Oranges', 2, 3, 2.5],
               ['Pears', 1, 5, 3],
               ['Bananas', 3, 9, 6],
               ['Plums', 4, 2, 3]      
            ]);
              
            // Set chart options
            var options = {
               title : 'Fruits distribution',
               vAxis: {title: 'Fruits'},
               hAxis: {title: 'Person'},
               seriesType: 'bars',
               series: {2: {type: 'line'}}
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ComboChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

結果

驗證結果。

Google Charts - 直方圖

直方圖是一種將數值資料分組到儲存桶中的圖表，並將儲存桶顯示為分段列。它們用於描述資料集的分佈，以及值落在哪個範圍內的頻率。Google Charts 會自動為您選擇儲存桶的數量。所有儲存桶的寬度相等，高度與儲存桶中資料點的數量成比例。直方圖在其他方面類似於柱狀圖。在本節中，我們將討論以下型別的基於直方圖的圖表。

序號	圖表型別和描述
1	基本直方圖基本直方圖。
2	控制顏色自定義直方圖的顏色。
3	控制儲存桶自定義直方圖的儲存桶。
4	多個序列具有多個序列的直方圖。

Google Charts - 折線圖

折線圖用於繪製基於線的圖表。在本節中，我們將討論以下型別的基於線的圖表。

序號	圖表型別和描述
1	基本折線圖基本折線圖。
2	帶有可見點帶有可見資料點的圖表。
3	可自定義的背景顏色具有自定義背景顏色的圖表。
4	可自定義的線條顏色具有自定義線條顏色的圖表。
5	可自定義的軸和刻度標籤具有自定義軸和刻度標籤的圖表。
6	十字準線在選擇時在資料點上顯示十字準線的折線圖。
7	可自定義的線條樣式具有自定義線條顏色的圖表。
8	帶有曲線線的折線圖帶有平滑曲線線的圖表。
9	Material 折線圖受 Material Design 啟發的折線圖。
10	頂部 X 軸折線圖受 Material Design 啟發的折線圖，X 軸位於圖表頂部。

Google Charts - 地圖

Google 地圖圖表使用 Google 地圖 API 來顯示地圖。資料值顯示為地圖上的標記。資料值可以是座標（經緯度對）或實際地址。地圖將相應縮放，以便包含所有已識別的點。

序號	圖表型別和描述
1	基本地圖基本 Google 地圖。
2	使用經緯度的地圖使用經緯度指定位置的地圖。
3	自定義標記地圖中的自定義標記。

Google Charts - 組織結構圖

組織結構圖有助於呈現節點的層次結構，用於描繪組織中的上下級關係。例如，家譜就是一種組織結構圖。我們已經在Google Charts 配置語法章節中看到了繪製此圖表所使用的配置。因此，讓我們來看一個完整的示例。

配置

我們使用了OrgChart類來顯示基於組織的圖表。

//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));

示例

googlecharts_organization_chart.htm

線上演示

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['orgchart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();   
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
               [{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']
            ]);			

            // Set chart options
            var options = {allowHtml:true};
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

結果

驗證結果。

Google Charts - 餅圖

餅圖用於繪製基於餅圖的圖表。在本節中，我們將討論以下型別的基於餅圖的圖表。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	環形圖環形圖。
3	3D 餅圖 3D 餅圖。
4	帶有爆炸切片的餅圖帶有爆炸切片的餅圖。

Google Charts - Sankey 圖

桑基圖是一種視覺化工具，用於描繪從一組值到另一組值的流。連線的物件稱為節點，連線稱為連結。桑基圖用於顯示兩個域之間或一組階段中的多個路徑之間的多對多對映。

序號	圖表型別和描述
1	基本桑基圖基本桑基圖。
2	多級桑基圖多級桑基圖。
3	自定義桑基圖自定義桑基圖。

Google Charts - 散點圖

桑基圖、散點圖、階梯面積圖、表格、時間軸、樹狀圖、趨勢線用於繪製基於散點的圖表。在本節中，我們將討論以下型別的基於散點的圖表。

序號	圖表型別和描述
1	基本散點圖基本散點圖。
2	材質散點圖材質散點圖。
3	雙 Y 軸散點圖具有雙 Y 軸的材質散點圖。
4	頂部 X 軸散點圖具有頂部 X 軸的材質散點圖。

Google Charts - 階梯面積圖

階梯面積圖是一種基於階梯的面積圖。我們將討論以下型別的階梯面積圖。

序號	圖表型別和描述
1	基本階梯圖基本階梯面積圖。
2	堆疊階梯圖堆疊階梯面積圖。
3	100% 堆疊階梯圖 100% 堆疊階梯面積圖。

Google Charts - 表格圖

表格圖表有助於呈現可以排序和分頁的表格。可以使用格式字串或直接插入 HTML 作為單元格值來格式化表格單元格。數值預設情況下右對齊；布林值顯示為複選標記或叉號。使用者可以使用鍵盤或滑鼠選擇單個行。列標題可用於排序。滾動時標題行保持固定。表格會觸發與使用者互動對應的事件。我們已經在Google Charts 配置語法章節中看到了繪製此圖表所使用的配置。因此，讓我們來看一個完整的示例。

配置

我們使用了Table類來顯示基於表格的圖表。

//table chart
var chart = new google.visualization.Table(document.getElementById('container'));

示例

googlecharts_table_chart.htm

線上演示

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['table']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
               ['Mike',  {v: 10000, f: '$10,000'}, true],
               ['Jim',   {v:8000,   f: '$8,000'},  false],
               ['Alice', {v: 12500, f: '$12,500'}, true],
               ['Bob',   {v: 7000,  f: '$7,000'},  true]
            ]);

            var options = {
               showRowNumber: true,
               width: '100%', 
               height: '100%'
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.Table(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

結果

驗證結果。

Google Charts - 時間軸圖表

時間軸圖顯示了一組資源隨時間的推移如何使用。我們將討論以下型別的時間軸圖表。

序號	圖表型別/描述
1	基本時間軸圖表基本時間軸圖表
2	帶有資料標籤的時間軸圖表帶有資料標籤的時間軸圖表
3	沒有行標籤的時間軸圖表沒有行標籤的時間軸圖表
4	時間軸圖表著色自定義時間軸圖表

Google Charts - 樹狀圖

樹狀圖是資料樹的視覺化表示，其中每個節點可以有零個或多個子節點，以及一個父節點（根節點除外）。每個節點都顯示為一個矩形，可以根據我們分配的值來調整大小和顏色。大小和顏色相對於圖中的所有其他節點進行估值。下面是一個樹狀圖的示例。我們已經在Google Charts 配置語法章節中看到了繪製此圖表所使用的配置。因此，讓我們來看一個完整的示例。

配置

我們使用了TreeMap類來顯示樹狀圖。

//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));

示例

googlecharts_treemap.htm

線上演示

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['treemap']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([
               ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
               ['Global',    null,                 0,                               0],
               ['America',   'Global',             0,                               0],
               ['Europe',    'Global',             0,                               0],
               ['Asia',      'Global',             0,                               0],
               ['Australia', 'Global',             0,                               0],
               ['Africa',    'Global',             0,                               0],  
               
               ['USA',       'America',            52,                              31],
               ['Mexico',    'America',            24,                              12],
               ['Canada',    'America',            16,                              -23],
               
               ['France',    'Europe',             42,                              -11],
               ['Germany',   'Europe',             31,                              -2],
               ['Sweden',    'Europe',             22,                              -13],   
               
               ['China',     'Asia',               36,                              4],
               ['Japan',     'Asia',               20,                              -12],
               ['India',     'Asia',               40,                              63],                  
               
               ['Egypt',     'Africa',             21,                              0],          
               ['Congo',     'Africa',             10,                              12],
               ['Zaire',     'Africa',             8,                               10]
            ]);
            var options = {      
               minColor: '#f00',
               midColor: '#ddd',
               maxColor: '#0d0',
               headerHeight: 15,
               fontColor: 'black',
               showScale: true
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.TreeMap(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

結果

驗證結果。

Google Charts - 趨勢線圖表

趨勢線是疊加在圖表上的線，用於揭示資料的整體方向。Google Charts 可以自動為桑基圖、散點圖、階梯面積圖、表格、時間軸、樹狀圖、趨勢線、條形圖、柱狀圖和折線圖生成趨勢線。我們將討論以下型別的趨勢線圖表。

序號	圖表型別和描述
1	基本趨勢線圖表基本趨勢線圖表。
2	指數趨勢線圖表指數趨勢線圖表。
3	多項式趨勢線圖表多項式趨勢線圖表。

列印頁面

序號	圖表型別和描述
1	基本面積圖基本面積圖
2	帶有負值的面積圖具有負值的面積圖。
3	堆疊面積圖圖表具有相互堆疊的區域。
4	百分比面積圖資料以百分比表示的圖表。
5	缺少點的面積圖資料中缺少點的圖表。
6	反轉軸使用反轉軸的面積圖。

序號	圖表型別和描述
1	基本柱狀圖基本柱狀圖
2	分組柱狀圖分組柱狀圖。
3	堆疊柱狀圖圖表具有相互堆疊的柱狀。
4	負堆疊柱狀圖帶有負堆疊的柱狀圖。
5	百分比堆疊柱狀圖資料以百分比表示的柱狀圖。
6	Material 柱狀圖受 Material Design 啟發的柱狀圖。
7	帶有資料標籤的柱狀圖帶有資料標籤的柱狀圖。

序號	圖表型別和描述
1	基本條形圖基本條形圖。
2	分組條形圖分組條形圖。
3	堆疊條形圖圖表具有相互堆疊的條形。
4	負堆疊條形圖帶有負堆疊的條形圖。
5	百分比堆疊條形圖資料以百分比表示的條形圖。
6	Material 條形圖受 Material Design 啟發的條形圖。
7	帶有資料標籤的條形圖帶有資料標籤的條形圖。

序號	圖表型別和描述
1	基本直方圖基本直方圖。
2	控制顏色自定義直方圖的顏色。
3	控制儲存桶自定義直方圖的儲存桶。
4	多個序列具有多個序列的直方圖。

序號	圖表型別和描述
1	基本折線圖基本折線圖。
2	帶有可見點帶有可見資料點的圖表。
3	可自定義的背景顏色具有自定義背景顏色的圖表。
4	可自定義的線條顏色具有自定義線條顏色的圖表。
5	可自定義的軸和刻度標籤具有自定義軸和刻度標籤的圖表。
6	十字準線在選擇時在資料點上顯示十字準線的折線圖。
7	可自定義的線條樣式具有自定義線條顏色的圖表。
8	帶有曲線線的折線圖帶有平滑曲線線的圖表。
9	Material 折線圖受 Material Design 啟發的折線圖。
10	頂部 X 軸折線圖受 Material Design 啟發的折線圖，X 軸位於圖表頂部。