• 售前

  • 售后

热门帖子
入门百科

如何利用RoughViz可视化Vue.js中的草画图表

[复制链接]
放弃六月们 显示全部楼层 发表于 2021-10-25 19:57:44 |阅读模式 打印 上一主题 下一主题
先容


图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表,但一些用户更喜好看得手绘或素描的图表,这就是 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,请运行以下下令以安装最新版本。
  1. npm install -g @vue/cli
  2. # OR
  3. yarn global add @vue/cli
复制代码
现在,创建一个新的 vue 应用步调:
  1. vue create my-app
复制代码
注意:此过程大概必要几分钟。完成后,我们可以进入新的应用步调根目录:
  1. 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 包罗在我们的项目中,请运行:
  1. 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 文件时,初始内容应雷同于下图:

假如你的视图如上所述,请继承并删除其全部内容,并更换为以下代码:
  1. <template>
  2. <div id="app">
  3.   
  4. <rough-bar :data="{
  5.     labels: ['North', 'South', 'East', 'West'],
  6.     values: [10, 5, 8, 3],
  7.    }" title="Regions" roughness="8" :colors="['red', 'orange', 'blue', 'skyblue']" stroke="black" stroke-width="3" fill-style="cross-hatch" fill-weight="3.5" />
  8. </div>
  9. </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 包括:
      
  • 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
  1. <template>
  2. <div id="app">
  3.   
  4. <div>
  5.    
  6.   <rough-bar v-if="chartValue.length > 0" :data="{
  7.      labels: chartLabel,
  8.      values: chartValue,
  9.     }" title="BTC - 10 Days" roughness="3" stroke="black" stroke-width="1" fill-style="zig-zag" fill-weight="2" />
  10.   
  11. </div>
  12. </div>
  13. </template>
复制代码
我们创建了一个异步方法 loadData() ,它从 coingecko API 获取比特币代价历史记录,并循环遍历返回的数据。我们将日期与代价分开,利用返回的日期作为图表标签,代价作为图表值。而 beforeMount() 也就是在我们的应用被挂载到视图之前,我们调用了前面创建的 loadData() 函数。
运行我们的应用步调应该,你应该看到我们的图表的新变革如下:

以上就是如何利用RoughViz可视化Vue.js中的草绘图表的详细内容,更多关于RoughViz可视化Vue.js中的草绘图表的资料请关注草根技术分享其它干系文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作