使用RoughViz可視化Vue.js中的草繪圖表

介紹

圖表是數(shù)據(jù)的圖形表示，用于使數(shù)據(jù)集更易于閱讀，并且易于區(qū)分各部分。雖然大多數(shù)用戶習(xí)慣于看到簡(jiǎn)潔而正式的圖表，但一些用戶更喜歡看到手繪或素描的圖表，這就是roughViz的用武之地。

roughViz是一個(gè)基于D3.js和Rough.js的JavaScript庫(kù)。該庫(kù)旨在幫助構(gòu)建看起來(lái)像草圖或手繪圖的圖表，如下例所示。

在本指南中，你將學(xué)習(xí)如何使用vue-roughviz在Vue.js應(yīng)用程序中顯示類似草圖的圖表，以及如何使用vue-cli配置Vue應(yīng)用程序。

先決條件

本教程假定滿足以下先決條件：

• 對(duì)Vue.js的基本了解
• Node.js的本地開發(fā)環(huán)境，以及對(duì)Node軟件包管理器（npm）的熟悉
• 文本編輯器，例如Visual Studio Code或Atom

開始

如果尚未安裝vue-cli，請(qǐng)運(yùn)行以下命令以安裝最新版本。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

現(xiàn)在，創(chuàng)建一個(gè)新的vue應(yīng)用程序：

vue create my-app

注意：此過(guò)程可能需要幾分鐘。完成后，我們可以進(jìn)入新的應(yīng)用程序根目錄：

cd my-app

上面詳細(xì)描述的過(guò)程創(chuàng)建了一個(gè)新的Vue.js應(yīng)用程序。為了確保一切都設(shè)置好了，運(yùn)行 npm run serve。當(dāng)你訪問(wèn)http://localhost:8080時(shí)，你應(yīng)該會(huì)在瀏覽器中看到“Welcome to Your Vue.js app page”。

添加vue-roughviz

vue-roughviz 是RoughViz.js的Vue.js包裝器。這使得該庫(kù)可以作為組件進(jìn)行訪問(wèn)，從而可以在基于Vue.js的項(xiàng)目中實(shí)現(xiàn)無(wú)縫重用。

要將 vue-roughviz 包含在我們的項(xiàng)目中，請(qǐng)運(yùn)行：

npm install vue-roughviz

vue-roughViz組件

vue-roughviz提供了所有rawViz圖表樣式的組件，其中包括：

• roughBar——rawViz條形圖組件
• roughBarH——roughViz水平條形圖組件
• roughDonut——roughViz甜甜圈圖組件
• roughPie——roughViz餅圖
• roughLine——roughViz折線圖組件
• roughScatter——roughViz分散圖表組件
• roughStackedBar——roughViz堆疊條形圖組件

使用

將 vue-roughviz 添加到項(xiàng)目后，下一步是在首選的文本編輯器中打開項(xiàng)目文件夾。

當(dāng)你打開 src/App.vue 文件時(shí)，初始內(nèi)容應(yīng)類似于下圖：

如果你的視圖如上所述，請(qǐng)繼續(xù)并刪除其所有內(nèi)容，并替換為以下代碼：

代碼說(shuō)明

• import ... ——這行代碼是從我們先前安裝的vue-roughviz導(dǎo)入rawBar組件。
• export default {} ——此塊是為了使以前導(dǎo)入的組件（roughBar）在我們的應(yīng)用中可用。
• ——這是我們調(diào)用外部rawBar組件的地方，這些組件中指定的屬性是必需的prop。

vue-roughviz props

唯一需要的prop是 data，它是用來(lái)構(gòu)造圖表的數(shù)據(jù)，這可以是字符串或?qū)ο蟆?/p>

如果選擇一個(gè)對(duì)象，則該對(duì)象必須包含 labels 和 values 鍵。如果改用字符串，則字符串必須是csv或tsv文件的URL。在這個(gè)文件中，還必須將 labels 和 values 指定為表示每個(gè)列的單獨(dú)屬性。

其他有用的prop包括：

• title——指定圖表標(biāo)題
• roughness——圖表的粗細(xì)度等級(jí)
• stroke——bar stroke的顏色
• stroke-width
• fill-weight——指定內(nèi)部路徑顏色的粗細(xì)。
• fill-style——條形填充樣式，可以是以下一種：
• dashed
• solid
• zigzag-line
• cross-hatch
• hachure
• zigzag

運(yùn)行

要預(yù)覽我們的應(yīng)用，運(yùn)行 npm run serve。如果你正確地遵循了上述步驟，訪問(wèn)http://localhost:8080應(yīng)該允許你查看瀏覽器中顯示的圖表。

從外部API加載數(shù)據(jù)

讓我們做一個(gè)小實(shí)驗(yàn)，在我們的圖表中顯示過(guò)去10天比特幣的價(jià)格歷史。在這個(gè)實(shí)驗(yàn)中，我們將使用Coingecko API。

**為什么選擇Coingecko？**與其他加密貨幣API不同，Coingecko是免費(fèi)的，不需要API密鑰就可以開始，這是我們實(shí)驗(yàn)的理想選擇。

繼續(xù)，用下面的代碼替換 src/App.vue

我們創(chuàng)建了一個(gè)異步方法 loadData()，它從coingecko API獲取比特幣價(jià)格歷史記錄，并循環(huán)遍歷返回的數(shù)據(jù)。我們將日期與價(jià)格分開，使用返回的日期作為圖表標(biāo)簽，價(jià)格作為圖表值。而 beforeMount() 也就是在我們的應(yīng)用被掛載到視圖之前，我們調(diào)用了前面創(chuàng)建的 loadData() 函數(shù)。

運(yùn)行我們的應(yīng)用程序應(yīng)該，你應(yīng)該看到我們的圖表的新變化如下:

結(jié)束

本文解釋了圖表及其用途，介紹了使用Vue-CLI創(chuàng)建Vue應(yīng)用程序的過(guò)程，并展示了如何使用 vue-roughviz 在Vue.js應(yīng)用程序中顯示類似草圖的圖表。

在線預(yù)覽及源碼

請(qǐng)戳這個(gè)鏈接：https://coding.zhangbing.site/view.html?url=./list/vue-roughviz.html

臨走前留下，今天的福利

• 福利1：高清PDF《JavaScript高級(jí)程序設(shè)計(jì)（第4版）.pdf》獲取資源請(qǐng)?jiān)诠娞?hào)對(duì)話框中回復(fù)關(guān)鍵字：FL05，如果沒(méi)有關(guān)注請(qǐng)掃下面的二維碼。更多福利資料請(qǐng)查看公眾號(hào)菜單
• 福利2：在看+留言，我隨機(jī)抽取一位認(rèn)真留言的小伙伴，給他發(fā)一個(gè)紅包獎(jiǎng)勵(lì)

最近文章