peity 是一个简单，轻量级的 JavaScript 库，可用于在网页中绘制小型、漂亮的图表。本文将介绍如何使用 npm 安装和使用 peity，以及如何在网页中绘制不同类型的图表。
介绍 peity
peity 可以绘制以下几种类型的图表：
- 线性图表
- 饼图
- 柱状图
它具有很小的代码体积（仅约 4KB），适合用于需要快速绘制小型图表的网页项目。
安装和使用 peity
要使用 peity，首先需要在您的项目中安装它。您可以使用 npm 命令来完成此操作：
npm install peity --save
这将安装最新版本的 peity 并将其添加到您的项目中。接下来，您需要在 HTML 文件中添加必要的脚本标记，以便浏览器可以加载 peity 库。
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/peity/jquery.peity.min.js"></script>
上述示例假设您已经安装了 jQuery，并且将 peity 下载到了 node_modules 目录中。
现在，您已经准备好开始绘制图表了！
绘制线性图表
下面是一个简单的示例，演示如何使用 peity 在网页中绘制线性图表。
<span class="chart">5,3,-2,4,6,8,5</span>
<script>
$(function() {
$(".chart").peity("line");
});
</script>在上面的代码中，我们将一些数据（用逗号分隔）放在 span 元素中，并使用 jQuery 将其选择器传递给 peity 函数。最后，我们指定要绘制的类型（即 “line”）。
绘制饼图
下面是一个简单的示例，演示如何使用 peity 在网页中绘制饼图。
<span class="chart">4/10</span>
<script>
$(function() {
$(".chart").peity("pie");
});
</script>在上面的代码中，我们将两个数字（用斜杠分隔）放在 span 元素中，并使用 jQuery 将其选择器传递给 peity 函数。最后，我们指定要绘制的类型（即 “pie”）。
绘制柱状图
下面是一个简单的示例，演示如何使用 peity 在网页中绘制柱状图。
<span class="chart">5,3,-2,4,6,8,5</span>
<script>
$(function() {
$(".chart").peity("bar");
});
</script>在上面的代码中，我们将一些数据（用逗号分隔）放在 span 元素中，并使用 jQuery 将其选择器传递给 peity 函数。最后，我们指定要绘制的类型（即 “bar”）。
总结
在本文中，我们介绍了 peity 库以及如何使用 npm 安装和在网页中使用它。我们还演示了如何使用 peity 绘制线性图表、饼图和柱状图，并提供了示例代码。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33607