移動web端要做數據可視化？
謝邀。在本教程中，您將學習如何利用DataTables.js和Highcharts.js等JavaScript庫來可視化數據。這是我們要構建的內容（查看更大的版本以獲得更好的體驗）：
必需的庫出于此示例的目的，我們必須在scripts中加載以下庫：
jQuery
DataTables.js
Highcharts.js
HTML為了解決問題，我們使用包含兩個子元素的容器類定義一個元素：
一個有26行的表。 第一行引用表頭，而其他25行引用國家詳細信息。 這個例子的數據來源是worldometers.info。
一個空的div將保存圖表。
這是HTML結構：
值得一提的是，為了簡單起見，我們已經指定了上述硬編碼表格數據。 但在實際項目中，表可能是動態創建的。
準備好標記后，為了清晰起見添加了背景顏色，項目如下所示：
CSS在這一點上，我們定義了一些基本樣式，如下所示：
了解這一點很重要：＃dt-table_wrapper在我們的標記中不存在。 一旦我們初始化它就由DataTables添加。
雖然我們為小屏幕定義了一些基本規則，但請注意，演示并不會完全響應。 我們可以做很多事情來使表格和圖表在小屏幕上看起來更好。 例如，對于DataTables，可以使用響應式擴展，但這超出了本教程的范圍。
提取表數據為了檢索所需的數據，我們將利用DataTables API。 負責此行為的函數如下：
在這個函數中，我們遍歷表行，對于每一行，我們獲取目標列數據并將它們存儲在關聯的數組中。 最后，所有這些數組都存儲在另一個數組中。
默認情況下，getTableData函數應該從所有表行收集數據。 但是如果我們在表中搜索特定的內容，則只應收集和處理匹配的行。 為了完成這些，我們將一個參數傳遞給rows函數。
構建圖表現在我們已經擁有了所需的數據，我們已準備好構建圖表。代碼如下：
其中包含兩個嵌套圖表，一個柱形圖和一個樣條圖。通過上一步獲取表數據并構建，我們不想要所有的數據。 事實上你會注意到圖表只包含前三列（國家，人口，密度）的數據，以下就是我們構建的最終圖表。
我會在這里發布所有與科技、科學有關的有趣文章，歡迎訂閱我的頭條號。偶爾也回答有趣的問題，有問題可隨時在評論區回復和討論。
（碼字不易，若文章對你幫助可點贊支持~）