如何使用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
vue-roughviz 是 RoughViz.js 的 Vue.js 包裝器。這使得該庫可以作為元件進行訪問，從而可以在基於 Vue.js 的專案中實現無縫重用。
要將 vue-roughviz 包含在我們的專案中，請執行：
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 新增到專案後，下一步是在首選的文字編輯器中開啟專案資料夾。
當你開啟 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-style="cross-hatch" fill-weight="3.5" />
</div>
</template>
程式碼說明
- import ...——這行程式碼是從我們先前安裝的 vue-roughviz 匯入 rawBar 元件。
- export default {} ——此塊是為了使以前匯入的元件（roughBar）在我們的應用中可用。
- <rough-bar :data="[...]" /> ——這是我們呼叫外部 rawBar 元件的地方，這些元件中指定的屬性是必需的 prop。
vue-roughviz props
唯一需要的 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應該允許你檢視瀏覽器中顯示的圖表。
從外部 API 載入資料
讓我們做一個小實驗，在我們的圖表中顯示過去 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-style="zig-zag" fill-weight="2" />
</div>
</div>
</template>
我們建立了一個非同步方法 loadData() ，它從 coingecko API 獲取比特幣價格歷史記錄，並迴圈遍歷返回的資料。我們將日期與價格分開，使用返回的日期作為圖表標籤，價格作為圖表值。而 beforeMount() 也就是在我們的應用被掛載到檢視之前，我們呼叫了前面建立的 loadData() 函式。
執行我們的應用程式應該，你應該看到我們的圖表的新變化如下:
以上就是如何使用RoughViz視覺化Vue.js中的草繪圖表的詳細內容，更多關於RoughViz視覺化Vue.js中的草繪圖表的資料請關注我們其它相關文章！