[[380640]]

介紹

圖表是數據的圖形表示，用于使數據集更易于閱讀，并且易于區分各部分。雖然大多數用戶習慣于看到簡潔而正式的圖表，但一些用戶更喜歡看到手繪或素描的圖表，這就是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 文件時，初始內容應類似于下圖：

src/App.vue file

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

<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" 
      class="d-inline" 
    /> 
  </div> 
</template> 
 
<script> 
import { RoughBar } from "vue-roughviz"; 
export default { 
  name: "App", 
  components: { 
    RoughBar, 
  }, 
}; 
</script> 

代碼說明

• import ... ——這行代碼是從我們先前安裝的vue-roughviz導入rawBar組件。
• export default {} ——此塊是為了使以前導入的組件(roughBar)在我們的應用中可用。
• ——這是我們調用外部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 class="d-inline-block"> 
      <rough-bar 
        v-if="chartValue.length > 0" 
        :data="{ 
          labels: chartLabel, 
          values: chartValue, 
        }" 
        title="BTC - 10 Days" 
        roughness="3" 
        color="#ccc" 
        stroke="black" 
        stroke-width="1" 
        fill-style="zig-zag" 
        fill-weight="2" 
      /> 
    </div> 
  </div> 
</template> 
 
<script> 
import { RoughBar } from "vue-roughviz"; 
export default { 
  name: "App", 
  components: { 
    RoughBar, 
  }, 
  data() { 
    return { 
      chartLabel: [], 
      chartValue: [], 
    }; 
  }, 
  methods: { 
    async loadData() { 
      await fetch( 
        "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=10&interval=daily" 
      ) 
        .then((res) => res.json()) 
        .then((rawData) => { 
          console.table(rawData.prices); 
          rawData.prices.map((data) => { 
            let date = new Date(data[0]).toDateString(); 
            let rPrice = data[1]; 
            console.log(`Price of 1btc on ${date} is ${rPrice}`); 
            this.chartLabel.push(date); 
            this.chartValue.push(rPrice); 
          }); 
        }) 
        .catch((err) => console.error("Fetch error -> ", err)); 
    }, 
  }, 
  beforeMount() { 
    this.loadData(); 
  }, 
}; 
</script> 

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

運行我們的應用程序應該，你應該看到我們的圖表的新變化如下:

結束

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

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。