共计 3426 个字符，预计需要花费 9 分钟才能阅读完成。
介绍
图表是数据的图形示意，用于使数据集更易于浏览，并且易于辨别各局部。尽管大多数用户习惯于看到简洁而正式的图表，但一些用户更喜爱看到手绘或素描的图表，这就是 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-roughvizvue-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"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）在咱们的利用中可用。<rough-bar :data="[...]" />——这是咱们调用内部 rawBar 组件的中央，这些组件中指定的属性是必须的 prop。
vue-roughviz props
惟一须要的 prop 是 data，它是用来结构图表的数据，这能够是字符串或对象。
如果抉择一个对象，则该对象必须蕴含 labels 和 values 键。如果改用字符串，则字符串必须是 csv 或 tsv 文件的 URL。在这个文件中，还必须将 labels 和 values 指定为示意每个列的独自属性。
其余有用的 prop 包含：
title——指定图表题目roughness——图表的粗细度等级stroke——bar stroke 的色彩stroke-widthfill-weight——指定外部门路色彩的粗细。-
fill-style——条形填充款式，能够是以下一种：dashedsolidzigzag-linecross-hatchhachurezigzag
运行
要预览咱们的利用，运行 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 应用程序中显示相似草图的图表。
在线预览及源码
请戳这个链接：https://coding.zhangbing.site/view.html?url=./list/vue-roughviz.html