移動(dòng)web端要做數(shù)據(jù)可視化？

謝邀。在本教程中，您將學(xué)習(xí)如何利用DataTables.js和Highcharts.js等JavaScript庫來可視化數(shù)據(jù)。這是我們要構(gòu)建的內(nèi)容（查看更大的版本以獲得更好的體驗(yàn)）：

必需的庫

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

jQuery

DataTables.js

Highcharts.js

HTML

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

一個(gè)有26行的表。 第一行引用表頭，而其他25行引用國家詳細(xì)信息。 這個(gè)例子的數(shù)據(jù)來源是worldometers.info。

一個(gè)空的div將保存圖表。

這是HTML結(jié)構(gòu)：

值得一提的是，為了簡單起見，我們已經(jīng)指定了上述硬編碼表格數(shù)據(jù)。 但在實(shí)際項(xiàng)目中，表可能是動(dòng)態(tài)創(chuàng)建的。

準(zhǔn)備好標(biāo)記后，為了清晰起見添加了背景顏色，項(xiàng)目如下所示：

CSS

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

了解這一點(diǎn)很重要：＃dt-table_wrapper在我們的標(biāo)記中不存在。 一旦我們初始化它就由DataTables添加。

雖然我們?yōu)樾∑聊欢x了一些基本規(guī)則，但請(qǐng)注意，演示并不會(huì)完全響應(yīng)。 我們可以做很多事情來使表格和圖表在小屏幕上看起來更好。 例如，對(duì)于DataTables，可以使用響應(yīng)式擴(kuò)展，但這超出了本教程的范圍。

提取表數(shù)據(jù)

為了檢索所需的數(shù)據(jù)，我們將利用DataTables API。 負(fù)責(zé)此行為的函數(shù)如下：

在這個(gè)函數(shù)中，我們遍歷表行，對(duì)于每一行，我們獲取目標(biāo)列數(shù)據(jù)并將它們存儲(chǔ)在關(guān)聯(lián)的數(shù)組中。 最后，所有這些數(shù)組都存儲(chǔ)在另一個(gè)數(shù)組中。

默認(rèn)情況下，getTableData函數(shù)應(yīng)該從所有表行收集數(shù)據(jù)。 但是如果我們?cè)诒碇兴阉魈囟ǖ膬?nèi)容，則只應(yīng)收集和處理匹配的行。 為了完成這些，我們將一個(gè)參數(shù)傳遞給rows函數(shù)。

構(gòu)建圖表

現(xiàn)在我們已經(jīng)擁有了所需的數(shù)據(jù)，我們已準(zhǔn)備好構(gòu)建圖表。代碼如下：

其中包含兩個(gè)嵌套圖表，一個(gè)柱形圖和一個(gè)樣條圖。通過上一步獲取表數(shù)據(jù)并構(gòu)建，我們不想要所有的數(shù)據(jù)。 事實(shí)上你會(huì)注意到圖表只包含前三列（國家，人口，密度）的數(shù)據(jù)，以下就是我們構(gòu)建的最終圖表。

我會(huì)在這里發(fā)布所有與科技、科學(xué)有關(guān)的有趣文章，歡迎訂閱我的頭條號(hào)。偶爾也回答有趣的問題，有問題可隨時(shí)在評(píng)論區(qū)回復(fù)和討論。

（碼字不易，若文章對(duì)你幫助可點(diǎn)贊支持~）