介绍
图表是数据的图形示意，用于使数据集更易于浏览，并且易于辨别各局部。尽管大多数用户习惯于看到简洁而正式的图表，但一些用户更喜爱看到手绘或素描的图表，这就是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
发表回复