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

介绍图表是数据的图形表示，用于使数据集更易于阅读，并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表，但一些用户更喜欢看到手绘或素描的图表，这就是 roughViz 的用武之地。roughViz 是一个基于 D3.js 和 Rough.js 的 JavaScript 库。该库旨在帮助构建看起来像草图或手绘图的图表，如下例所示。在本指南中，你将学习如何使用 vue-roughviz 在 Vue.js 应用程序中显示类似草图的图表，以及如何使用 vue-cli 配置 Vue 应用程序。先决条件本教程假定满足以下先决条件：。使用将 vue-roughviz 添加到项目后，下一步是在首选的文本编辑器中打开项目文件夹。在这个文件中，还必须将 labels 和 values 指定为表示每个列的单独属性。在这个实验中，我们将使用 Coingecko API。我们将日期与价格分开，使用返回的日期作为图表标签，价格作为图表值。