简介
n-dataer 是一款前端数据可视化工具，可支持各种类型的图表，并且使用方便，适合初学者快速理解使用。本文将向您介绍如何使用 n-dataer，使您能快速上手，轻松实现数据可视化。
安装
在终端中输入以下命令进行安装 n-dataer：
npm install n-dataer
使用
- 引入 n-dataer
在 HTML 文件中引入 n-dataer：
<script src="./node_modules/n-dataer/dist/n-dataer.js"></script>
- 数据格式
在使用 n-dataer 之前，我们需要先准备好数据，n-dataer 是基于 data 数组来渲染图表的，data 数组的每一项代表一条数据记录，具体数据结构如下：
[{
name: '数据项名称',
value: 数据项数值
}]- 柱状图展示
接下来，我们将演示如何使用 n-dataer 绘制柱状图。首先，我们需要创建一个容器，用于显示图表：
<div id="barChart"></div>
接着，我们使用以下 JavaScript 代码生成一份模拟数据：
-- -------------------- ---- ------- --- ---- - -- ----- ------ ------ -- -- - ----- ------ ------ -- -- - ----- ------ ------ -- -- - ----- ------ ------ -- -- - ----- ------ ------ -- ---
接着，我们使用以下 JavaScript 代码绘制柱状图：
let chart = new nDataer(document.getElementById('barChart'));
chart.bar({
data,
xKey: 'name',
yKey: 'value',
title: '柱状图'
});这行代码的意思是：用 n-dataer 在 id 为 barChart 的 DOM 节点上绘制柱状图，数据是 data 数组，其中的 name 字段是 x 轴的数据字段，value 字段是 y 轴的数据字段，title 是图表的标题。
- 饼图展示
接下来，我们将演示如何使用 n-dataer 绘制饼图，和上面的柱状图展示非常相似。首先，我们需要创建一个容器，用于显示图表：
<div id="pieChart"></div>
接着，我们使用以下 JavaScript 代码生成一份模拟数据：
-- -------------------- ---- ------- --- ---- - -- ----- ------ ------ -- -- - ----- ------ ------ -- -- - ----- ------ ------ -- -- - ----- ------ ------ -- -- - ----- ------ ------ -- ---
接着，我们使用以下 JavaScript 代码绘制饼图：
let chart = new nDataer(document.getElementById('pieChart'));
chart.pie({
data,
key: 'name',
value: 'value',
title: '饼图'
});这行代码的意思是：用 n-dataer 在 id 为 pieChart 的 DOM 节点上绘制饼图，数据是 data 数组，其中的 name 字段是饼图的区块名称字段，value 字段是该区块对应的数值字段，title 是图表的标题。
总结
本文介绍了 npm 包 n-dataer 的使用教程，希望能够帮助初学者快速上手，实现数据可视化。n-dataer 支持多种图表类型，并且使用方便，适合各种类型的开发者使用。若您有任何使用问题或者建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005685981e8991b448e45e6