這裡推薦一個js庫—echarts.js，專門用於做資料視覺化的，提供的圖表型別眾多，如下，而且帶有豐富的示例和教程，很容易學習和掌握，下面我大概介紹一下這個js庫的使用：

測試程式碼如下，這裡隨便新建一個html文件，將步驟一下載好的echarts.js和這個html文件放在一個目錄下邊，只需將上面的示例程式碼複製到下圖畫框出就行：

用瀏覽器開啟html檔案，程式執行截圖如下，已經成功繪製出所需圖形：

出於此示例的目的，我們必須在scripts中載入以下庫：

jQuery

DataTables.js

Highcharts.js

為了解決問題，我們使用包含兩個子元素的容器類定義一個元素：

一個空的div將儲存圖表。

這是HTML結構：

值得一提的是，為了簡單起見，我們已經指定了上述硬編碼表格資料。 但在實際專案中，表可能是動態建立的。

準備好標記後，為了清晰起見添加了背景顏色，專案如下所示：

在這一點上，我們定義了一些基本樣式，如下所示：

瞭解這一點很重要：＃dt-table_wrapper在我們的標記中不存在。 一旦我們初始化它就由DataTables新增。

雖然我們為小螢幕定義了一些基本規則，但請注意，演示並不會完全響應。 我們可以做很多事情來使表格和圖表在小螢幕上看起來更好。 例如，對於DataTables，可以使用響應式擴充套件，但這超出了本教程的範圍。

為了檢索所需的資料，我們將利用DataTables API。 負責此行為的函式如下：

在這個函式中，我們遍歷錶行，對於每一行，我們獲取目標列資料並將它們儲存在關聯的陣列中。 最後，所有這些陣列都儲存在另一個數組中。

預設情況下，getTableData函式應該從所有錶行收集資料。 但是如果我們在表中搜索特定的內容，則只應收集和處理匹配的行。 為了完成這些，我們將一個引數傳遞給rows函式。

現在我們已經擁有了所需的資料，我們已準備好構建圖表。程式碼如下：

其中包含兩個巢狀圖表，一個柱形圖和一個樣條圖。透過上一步獲取表資料並構建，我們不想要所有的資料。 事實上你會注意到圖表只包含前三列（國家，人口，密度）的資料，以下就是我們構建的最終圖表。