了解RoughViz可视化Vue.js中的草绘图表
发布时间：2021-06-04 11:08:41 所属栏目：大数据 来源：互联网
导读：介绍 图表是数据的图形表示，用于使数据集更易于阅读，并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表，但一些用户更喜欢看到手绘或素描的图表，这就是roughViz的用武之地。 roughViz是一个基于D3.js和Rough.js的JavaScript库。该库旨在帮助
|
介绍
图表是数据的图形表示，用于使数据集更易于阅读，并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表，但一些用户更喜欢看到手绘或素描的图表，这就是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堆叠条形图组件
 （编辑：阜新站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读