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

2020年12月30日11:23:48 发表评论 42 次浏览

本文概述

介绍

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

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

手绘与roughViz的图表

在本指南中, 你将学习如何在你的Vue.js应用程序使用vue-roughviz, 以及如何使用vue-cli配置Vue应用程序.

先决条件

本教程假定满足以下先决条件:

  • 基本熟悉Vue.js
  • 本地开发环境Node.js, 并熟悉Node软件包管理器(npm)
  • 像这样的文本编辑器Visual Studio程式码or原子

项目设置

如果尚未安装vue-cli, 请运行以下命令以安装最新版本。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

现在, 创建一个新的vue应用程序:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

使用RoughViz可视化Vue.js中的草绘图表1
vue create my-app

注意:此过程可能需要几分钟。完成后, 我们可以进入新的应用程序根目录:

cd my-app

上面详述的过程将创建一个新的Vue.js应用程序。为确保一切设置正确, 请运行npm运行发球。访问时, 你应该在浏览器中看到"欢迎使用Vue.js应用程序页面"http://本地主机:8080.

添加vue-roughviz

Vue-Roughviz是RoughViz.js的Vue.js包装器。这使得该库可以作为组件进行访问, 从而可以在基于Vue.js的项目中实现无缝重用。

包括Vue-Roughviz在我们的项目中, 运行:

npm install vue-roughviz

vue-roughViz组件

vue-roughviz提供了所有rawViz图表样式的组件, 其中包括:

  • 粗棒– rawViz条形图组件
  • 粗糙的– rawViz水平条形图组件
  • 甜甜圈–oughViz甜甜圈图组件
  • 粗糙的馅饼– rawViz饼图
  • 粗线– rawViz折线图组件
  • 粗糙散点图– rawViz分散图表组件
  • oughStackedBar– rawViz堆叠条形图组件

用法

一旦添加Vue-Roughviz对于你的项目, 下一步是在首选的文本编辑器中打开项目文件夹。

当你打开src / App.vue文件, 初始内容应类似于下图:

src / App.vue文件

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>

代码说明

  • 进口...–此行是从我们先前安装的vue-roughviz导入rawBar组件。
  • 导出默认值{}–此块是为了使以前导入的组件(roughBar)在我们的应用程序中可用。
  • <rough-bar:data =" [...]" />–这是我们调用外部rawBar组件的地方。这些组件中指定的属性是必需的道具。如果你不熟悉单个文件组件, 则可能需要签出本指南.

Vue-Roughviz道具

唯一需要的道具是数据, 指的是用于构建图表的数据。这可以是字符串或对象。

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

其他有用的道具包括:

  • 标题–指定图表标题
  • 粗糙度–图表的粗糙度等级
  • 中风–条形笔触的颜色
  • 笔划宽度–杆行程的大小
  • 填充重量–指定内部路径颜色的权重。
  • 填充样式–条形填充样式, 可以是以下之一:
    • 虚线
    • 固体
    • 曲折线
    • 交叉影线
    • Hachure
    • 之字形

访问这里有关所有支持的道具的列表。

运行

要预览我们的应用, 请运行npm运行发球。如果你正确执行了上述步骤, 请访问http://本地主机:8080应该可以让你查看浏览器中显示的图表。

RoughViz条形图

从外部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()我们之前创建的功能。

运行我们的应用程序, 你应该看到对图表进行的新更改, 如下所示:

外部API图表

总结

本文介绍了图表及其用途, 引导你完成使用vue-cli创建Vue应用程序的过程, 并展示了如何使用vue-roughviz在Vue.js应用程序中显示类似草图的图表。

进一步探索

如果你想了解更多有关roughViz或为roughViz做贡献, 请访问RoughVizorVue-RoughvizGitHub上的项目。该教程源代码也可以在GitHub上获得这里.

准确体验用户的Vue应用程序

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了Vue应用程序中发生的所有事情, 包括网络请求, JavaScript错误, 性能问题等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy Vuex插件将Vuex突变记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Vue应用程序的方式-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: