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


Posted in Vue.js onJanuary 30, 2021

介绍

图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表,但一些用户更喜欢看到手绘或素描的图表,这就是 roughViz 的用武之地。

roughViz 是一个基于 D3.js 和 Rough.js 的 JavaScript 库。该库旨在帮助构建看起来像草图或手绘图的图表,如下例所示。

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

在本指南中,你将学习如何使用 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 文件时,初始内容应类似于下图:

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

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

<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" />
 
 </div>

</template>

代码说明

  • 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 包括:

  1. title——指定图表标题
  2. roughness——图表的粗细度等级
  3. stroke——bar stroke 的颜色
  4. stroke-width
  5. fill-weight——指定内部路径颜色的粗细。
  6. fill-style——条形填充样式,可以是以下一种:
  • dashed
  • solid
  • zigzag-line
  • cross-hatch
  • hachure
  • zigzag

运行

要预览我们的应用,运行 npm run serve。如果你正确地遵循了上述步骤,访问http://localhost:8080应该允许你查看浏览器中显示的图表。

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

从外部 API 加载数据

让我们做一个小实验,在我们的图表中显示过去 10 天比特币的价格历史。在这个实验中,我们将使用 Coingecko API。

为什么选择 Coingecko?与其他加密货币 API 不同,Coingecko 是免费的,不需要 API 密钥就可以开始,这是我们实验的理想选择。

继续,用下面的代码替换 src/App.vue

<template>
 
 <div id="app">
  
 <div>
   
  <rough-bar v-if="chartValue.length > 0" :data="{
     labels: chartLabel,
     values: chartValue,
    }" title="BTC - 10 Days" roughness="3" stroke="black" stroke-width="1" fill-style="zig-zag" fill-weight="2" />
  
 </div>
 
 </div>

</template>

我们创建了一个异步方法 loadData() ,它从 coingecko API 获取比特币价格历史记录,并循环遍历返回的数据。我们将日期与价格分开,使用返回的日期作为图表标签,价格作为图表值。而 beforeMount() 也就是在我们的应用被挂载到视图之前,我们调用了前面创建的 loadData() 函数。

运行我们的应用程序应该,你应该看到我们的图表的新变化如下:

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

以上就是如何使用RoughViz可视化Vue.js中的草绘图表的详细内容,更多关于RoughViz可视化Vue.js中的草绘图表的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue监听键盘事件的相关总结
Jan 29 #Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python文件比较示例分享
2014/01/10 Python
Python可变参数用法实例分析
2017/04/02 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
详解django2中关于时间处理策略
2019/03/06 Python
python3实现猜数字游戏
2020/12/07 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python画图常规设置方式
2020/03/05 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python 串口通信的实现
2020/09/29 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
金融专业推荐信
2013/11/14 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
食品销售计划书
2014/04/26 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
一文搞懂python异常处理、模块与包
2021/06/26 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript