介紹

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

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

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

先決條件

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

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

開始

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

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

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

vue create my-app

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

cd my-app

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

添加 vue-roughviz

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

要將 vue-roughviz 包含在我們的項目中，請運(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 添加到項目后，下一步是在首選的文本編輯器中打開項目文件夾。

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

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

<template>
 
 <div id="app">
  
 <rough-bar :data="{
    labels: ['North', 'South', 'East', 'West'],
    values: [10, 5, 8, 3],
   }" title="Regions" roughness="8" :colors="['red', 'orange', 'blue', 'skyblue']" stroke="black" stroke-width="3" fill-style="cross-hatch" fill-weight="3.5" />
 
 </div>

</template>

代碼說明

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

vue-roughviz props

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

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

其他有用的 prop 包括：

1. title——指定圖表標(biāo)題
2. roughness——圖表的粗細(xì)度等級
3. stroke——bar stroke 的顏色
4. stroke-width
5. fill-weight——指定內(nèi)部路徑顏色的粗細(xì)。
6. fill-style——條形填充樣式，可以是以下一種：

• dashed
• solid
• zigzag-line
• cross-hatch
• hachure
• zigzag

運(yùn)行

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

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

讓我們做一個小實驗，在我們的圖表中顯示過去 10 天比特幣的價格歷史。在這個實驗中，我們將使用 Coingecko API。

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

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

<template>
 
 <div id="app">
  
 <div>
   
  <rough-bar v-if="chartValue.length > 0" :data="{
     labels: chartLabel,
     values: chartValue,
    }" title="BTC - 10 Days" roughness="3" stroke="black" stroke-width="1" fill-style="zig-zag" fill-weight="2" />
  
 </div>
 
 </div>

</template>

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

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

以上就是如何使用RoughViz可視化Vue.js中的草繪圖表的詳細(xì)內(nèi)容，更多關(guān)于RoughViz可視化Vue.js中的草繪圖表的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論