介绍

图表是数据的图形示意，用于使数据集更易于浏览，并且易于辨别各局部。尽管大多数用户习惯于看到简洁而正式的图表，但一些用户更喜爱看到手绘或素描的图表，这就是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# ORyarn 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"      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-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应用程序中显示相似草图的图表。

在线预览及源码

请戳这个链接：https://coding.zhangbing.site/view.html?url=./list/vue-roughviz.html