头图

使用RoughViz可视化Vue.js中的草绘图表

介绍

图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表,但一些用户更喜欢看到手绘或素描的图表,这就是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 文件时,初始内容应类似于下图:

src/App.vue file

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

<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,它是用来构造图表的数据,这可以是字符串或对象。

如果选择一个对象,则该对象必须包含 labelsvalues 键。如果改用字符串,则字符串必须是csv或tsv文件的URL。在这个文件中,还必须将 labelsvalues 指定为表示每个列的单独属性。

其他有用的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


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 721

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木145阅读 12k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy45阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木63阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏