這篇文章給大家分享的是有關怎樣使用RoughViz可視化Vue.js中的草繪圖表的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
圖表是數據的圖形表示，用于使數據集更易于閱讀，并且易于區分各部分。雖然大多數用戶習慣于看到簡潔而正式的圖表，但一些用戶更喜歡看到手繪或素描的圖表，這就是 roughViz 的用武之地。
roughViz 是一個基于 D3.js 和 Rough.js 的 JavaScript 庫。該庫旨在幫助構建看起來像草圖或手繪圖的圖表，如下例所示。
在本指南中，你將學習如何使用 vue-roughviz 在 Vue.js 應用程序中顯示類似草圖的圖表，以及如何使用 vue-cli 配置 Vue 應用程序。
本教程假定滿足以下先決條件：
對 Vue.js 的基本了解
Node.js 的本地開發環境，以及對 Node 軟件包管理器（npm）的熟悉
文本編輯器，例如 Visual Studio Code 或 Atom
如果尚未安裝 vue-cli，請運行以下命令以安裝最新版本。
npm install -g @vue/cli # OR yarn global add @vue/cli
現在，創建一個新的 vue 應用程序：
vue create my-app
注意：此過程可能需要幾分鐘。完成后，我們可以進入新的應用程序根目錄：
cd my-app
上面詳細描述的過程創建了一個新的 Vue.js 應用程序。為了確保一切都設置好了，運行 npm run serve。當你訪問http://localhost:8080時，你應該會在瀏覽器中看到“Welcome to Your Vue.js app page”。
vue-roughviz 是 RoughViz.js 的 Vue.js 包裝器。這使得該庫可以作為組件進行訪問，從而可以在基于 Vue.js 的項目中實現無縫重用。
要將 vue-roughviz 包含在我們的項目中，請運行：
npm install vue-roughviz
vue-roughviz 提供了所有 rawViz 圖表樣式的組件，其中包括：
roughBar——rawViz 條形圖組件
roughBarH——roughViz 水平條形圖組件
roughDonut——roughViz 甜甜圈圖組件
roughPie——roughViz 餅圖
roughLine——roughViz 折線圖組件
roughScatter——roughViz 分散圖表組件
roughStackedBar——roughViz 堆疊條形圖組件
將 vue-roughviz 添加到項目后，下一步是在首選的文本編輯器中打開項目文件夾。
當你打開 src/App.vue 文件時，初始內容應類似于下圖：
如果你的視圖如上所述，請繼續并刪除其所有內容，并替換為以下代碼：
<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- fill-weight="3.5" />
</div>
</template>代碼說明
import ...——這行代碼是從我們先前安裝的 vue-roughviz 導入 rawBar 組件。
export default {} ——此塊是為了使以前導入的組件（roughBar）在我們的應用中可用。
<rough-bar :data="[...]" /> ——這是我們調用外部 rawBar 組件的地方，這些組件中指定的屬性是必需的 prop。
唯一需要的 prop 是 data，它是用來構造圖表的數據，這可以是字符串或對象。
如果選擇一個對象，則該對象必須包含 labels 和 values 鍵。如果改用字符串，則字符串必須是 csv 或 tsv 文件的 URL。在這個文件中，還必須將 labels 和 values 指定為表示每個列的單獨屬性。
其他有用的 prop 包括：
title——指定圖表標題
roughness——圖表的粗細度等級
stroke——bar stroke 的顏色
stroke-width
fill-weight——指定內部路徑顏色的粗細。
fill-style——條形填充樣式，可以是以下一種：
dashed
solid
zigzag-line
cross-hatch
hachure
zigzag
要預覽我們的應用，運行 npm run serve。如果你正確地遵循了上述步驟，訪問http://localhost:8080應該允許你查看瀏覽器中顯示的圖表。
讓我們做一個小實驗，在我們的圖表中顯示過去 10 天比特幣的價格歷史。在這個實驗中，我們將使用 Coingecko API。
為什么選擇 Coingecko？與其他加密貨幣 API 不同，Coingecko 是免費的，不需要 API 密鑰就可以開始，這是我們實驗的理想選擇。
繼續，用下面的代碼替換 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- fill-weight="2" />
</div>
</div>
</template>我們創建了一個異步方法 loadData() ，它從 coingecko API 獲取比特幣價格歷史記錄，并循環遍歷返回的數據。我們將日期與價格分開，使用返回的日期作為圖表標簽，價格作為圖表值。而 beforeMount() 也就是在我們的應用被掛載到視圖之前，我們調用了前面創建的 loadData() 函數。
運行我們的應用程序應該，你應該看到我們的圖表的新變化如下:
感謝各位的閱讀！關于“怎樣使用RoughViz可視化Vue.js中的草繪圖表”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
