如何使用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与React的区别和优势对比
Dec 18 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue生命周期钩子函数以及触发时机
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语法小结之基础和变量
2015/11/22 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
python 回调函数和回调方法的实现分析
2016/03/23 Python
深入学习Python中的装饰器使用
2016/06/20 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Python发展史及网络爬虫
2019/06/19 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
创新比赛获奖感言
2014/02/13 职场文书
给老婆的保证书范文
2014/04/28 职场文书
另类冲刺标语
2014/06/24 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
荆州古城导游词
2015/02/06 职场文书
学籍证明模板
2015/06/18 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Nginx安装配置详解
2022/06/25 Servers