乐趣区

关于前端:使用RoughViz可视化Vuejs中的草绘图表

jiezi

介绍

图表是数据的图形示意，用于使数据集更易于浏览，并且易于辨别各局部。尽管大多数用户习惯于看到简洁而正式的图表，但一些用户更喜爱看到手绘或素描的图表，这就是 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 文件时，初始内容应相似于下图：

如果你的视图如上所述，请持续并删除其所有内容，并替换为以下代码：

<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

退出移动版