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

這篇文章主要介紹“怎么使用RoughViz可視化Vue.js中的草繪圖表”，在日常操作中，相信很多人在怎么使用RoughViz可視化Vue.js中的草繪圖表問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么使用RoughViz可視化Vue.js中的草繪圖表”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到吉木乃網(wǎng)站設(shè)計(jì)與吉木乃網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋吉木乃地區(qū)。

介紹

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

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

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

先決條件

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

  • 對(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)類似于下圖：

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

src/App.vue file

如果你的視圖如上所述，請(qǐ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"       class="d-inline"     />   </div> </template>  <script> import { RoughBar } from "vue-roughviz"; export default {   name: "App",   components: {     RoughBar,   }, }; </script>

代碼說(shuō)明

  • import ... &mdash;&mdash;這行代碼是從我們先前安裝的vue-roughviz導(dǎo)入rawBar組件。

  • export default {} &mdash;&mdash;此塊是為了使以前導(dǎo)入的組件(roughBar)在我們的應(yīng)用中可用。

  • &mdash;&mdash;這是我們調(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&mdash;&mdash;指定圖表標(biāo)題

  • roughness&mdash;&mdash;圖表的粗細(xì)度等級(jí)

  • stroke&mdash;&mdash;bar stroke的顏色

  • stroke-width

  • fill-weight&mdash;&mdash;指定內(nèi)部路徑顏色的粗細(xì)。

  • fill-style&mdash;&mdash;條形填充樣式，可以是以下一種：

    • 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)該允許你查看瀏覽器中顯示的圖表。

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

從外部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

<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>

我們創(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)該看到我們的圖表的新變化如下:

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

到此，關(guān)于“怎么使用RoughViz可視化Vue.js中的草繪圖表”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前題目：怎么使用RoughViz可視化Vue.js中的草繪圖表
本文URL：http://muchs.cn/article22/geeocc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)