在前端开发中，经常要用到图表来展示数据，而现在多数情况下都是使用 JavaScript 插件来实现。本篇文章将介绍一个非常方便且易于上手的 JavaScript 图表库——npm 包 perspectives。
1. 安装 npm 包 perspectives
首先，你需要在你的项目中安装 perspectives。这可以通过运行以下命令来完成：
npm install perspectives
2. 导入和展现数据
安装完成后，你需要将 perspectives 引入到你的项目中，如下所示：
import perspectives from 'perspectives';
通过使用 perspectives 的 pivot() 方法，你可以定义你想要展示的数据，如下所示：
-- -------------------- ---- ------- ----- ---- - - ------- ------ ------ --------- ------ --- ------- ------- ------ ----------- ------ --- ------- -------- ------ ----------- ------ --- ------- -------- ------ --------- ------ --- -- ----- ------ - - ----- ---------- -------- ---------- ------- --------- -- ------------------------ ------------------------ -- - ----------------------- ---
pivot() 方法接受两个参数：一个是要展示的数据，另一个是用来配置图表的对象。
在上面的例子中，我们需要展示颜色（color）、形状（shape）和数量（count）这三项数据。我们将颜色作为行（row），形状作为列（column），数量作为值（value），并用 config 对象来传递这些信息。
当 pivot() 方法异步执行完成后，它会返回一个 promise 值，我们可以通过 .then() 来处理返回的展示数据。
3. 展示图表
得到展示数据后，我们就可以通过使用 perspectives 中提供的各种可视化方法来展示数据了。下面的例子中，我们将使用 plot() 方法来展示数据。
const plot = perspectives.plot(pivotData, {
rendererName: 'Bar Chart',
});
document.body.appendChild(plot);在上面的例子中，我们将使用 Bar Chart 渲染器来展示数据。运行代码后，你就会在页面中看到柱状图，用来展示颜色和形状的对应数量了。
总结
通过本文，您已经学会了如何使用 npm 包 perspectives 来展示您的数据。当您需要在您的项目中展示数据时，请考虑使用此库，以获得更方便的展示方式。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f7277583901