使用RoughViz在Vue.js中可视化粗略图表

介绍图表是数据的图形表示，用于使数据集更易于阅读和轻松区分各部分。虽然大多数用户习惯于看到干净和正式的图表，但有些用户更喜欢看到手绘或速写的图表，这就是roughViz的用武之地。roughViz是一个基于D3.js和Rough.js的JavaScript库。该库旨在帮助构建看起来像草图或手绘图的图表，如下例所示。在本指南中，您将学习如何使用vue-roughviz在Vue.js应用程序中显示类似草图的图表，以及如何使用vue-cli配置Vue应用程序。先决条件本教程假设以下先决条件：基本了解Vue.jsNode.js的本地开发环境，并熟悉Node包管理器(npm)文本编辑器，如VisualStudioCode或Atom如果您还没有开始已经安装vue-cli，运行以下命令安装最新版本。npminstall-g@vue/cli#ORyarnglobaladd@vue/cli现在，创建一个新的vue应用程序：vuecreatemy-app注意：这个过程可能需要几分钟。完成后，我们可以进入新的应用程序根目录：cdmy-app上面详述的过程创建了一个新的Vue.js应用程序。为确保一切都已设置，请运行npmrunserve。当您访问http://localhost:8080时，您应该会在浏览器中看到“欢迎来到您的Vue.js应用程序页面”。添加vue-roughvizvue-roughviz是RoughViz.js的Vue.js包装器。这使得库可以作为组件访问，允许在基于Vue.js的项目中无缝重用。要在我们的项目中包含vue-roughviz，请运行：npminstallvue-roughvizvue-roughViz组件vue-roughviz提供了所有rawViz图表样式组件，包括：roughBar-rawViz条形图组件roughBarH-roughViz水平条形图组件roughDonut-roughVizdonut图表组件roughPie-roughViz饼图roughLine-roughViz折线图组件roughScatter-roughViz散点图组件roughStackedBar-roughViz堆叠条形图组件使用添加vue-roughviz项目到位后，下一步是打开你的项目文件夹首选文本编辑器。当您打开src/App.vue文件时，初始内容应如下图所示：如果您的视图如下所示，请继续删除其所有内容并将其替换为以下代码：代码说明import...——这行代码导入了我们之前安装的vue-roughviz中的rawBar组件。exportdefault{}-此块用于使之前导入的组件(roughBar)在我们的应用程序中可用。-这是我们调用外部rawBar组件的地方，这些组件中指定的属性是必需的道具。vue-roughvizprops唯一需要的prop就是data，也就是用来构造图表的数据，可以是字符串也可以是对象。如果选择了一个对象，则该对象必须包含标签和值键。如果改为使用字符串，则该字符串必须是指向csv或tsv文件的URL。在这个文件中，标签和值也必须指定为代表每一列的单独属性。其他有用的道具包括：title-指定图表标题roughness-图表描边的粗细级别-条形描边的颜色stroke-widthfill-weight-指定内部路径颜色的粗细。fill-style-条形填充样式，可以是以下之一：dashedsolidzigzag-linecross-hatchhachurezigzagRun要预览我们的应用程序，请运行npmrunserve。如果您正确执行了上述步骤，访问http://localhost:8080应该可以让您看到浏览器中显示的图表。从外部API加载数据让我们做一个小实验，在我们的图表中显示比特币过去10天的价格历史记录。在这个实验中，我们将使用CoingeckoAPI。为什么选择Coingecko？与其他加密货币API不同，Coingecko是免费的，不需要API密钥即可开始使用，这非常适合我们的实验。继续，用下面的代码替换src/App.vue我们创建了一个异步方法loadData()，它从coingeckoAPI获取比特币历史价格并循环返回数据我们将日期与价格分开，并将返回日期用作图表标签，将价格用作图表值。而beforeMount()是在我们的应用程序挂载到视图之前，我们调用之前创建的loadData()函数。运行我们的应用程序，您应该看到我们的图表的新变化如下所示：结束本文解释了图表及其用途，演练了使用Vue-CLI创建Vue应用程序的过程，并展示了如何使用vue-roughviz在Vue.js应用程序中显示的类似草图的图表。在线预览和源码请点击此链接：https://coding.zhangbing.site/view.html?url=./list/vue-roughviz.html