简介
@xudafeng/plotjs 是一个用于绘制图表的 npm 包。它基于 D3.js 和 Plotly.js，并提供了更加简洁的 API 使用方式。
安装
在终端中执行以下命令来安装 @xudafeng/plotjs：
npm install @xudafeng/plotjs
使用
在代码中引入 @xudafeng/plotjs 并创建一个绘图对象：
import Plot from '@xudafeng/plotjs'; const plot = new Plot();
绘制柱状图
绘制柱状图可以使用 plot.bars() 方法。这个方法接收一个 data 参数和一个 options 参数。
data 参数是一个对象数组，每个对象表示一组数据，其中 x 表示 x 轴的值，y 表示 y 轴的值。
options 参数是一个选项对象，其中包含我们需要设置的图表选项，比如设置 x 轴和 y 轴的 label，设置图表的标题等。
以下是一个简单的柱状图绘制示例：
-- -------------------- ---- ------- ----- ---- - - - -- ---- -- -- -- - -- ---- -- -- -- - -- ---- -- -- -- - -- ---- -- -- -- -- ----- ------- - - ------- ----- ------- ----- ------ ------ -- --------------- ---------
绘制折线图
绘制折线图可以使用 plot.lines() 方法。这个方法接收一个 data 参数和一个 options 参数。
data 参数是一个对象数组，每个对象表示一组数据，其中 x 表示 x 轴的值，y 表示 y 轴的值。
options 参数是一个选项对象，其中包含我们需要设置的图表选项，比如设置 x 轴和 y 轴的 label，设置图表的标题等。
以下是一个简单的折线图绘制示例：
-- -------------------- ---- ------- ----- ---- - - - -- -- -- -- -- - -- -- -- -- -- - -- -- -- -- -- - -- -- -- -- -- -- ----- ------- - - ------- ----- ------- ----- ------ ------ -- ---------------- ---------
绘制散点图
绘制散点图可以使用 plot.scatter() 方法。这个方法接收一个 data 参数和一个 options 参数。
data 参数是一个对象数组，每个对象表示一组数据，其中 x 表示 x 轴的值，y 表示 y 轴的值。
options 参数是一个选项对象，其中包含我们需要设置的图表选项，比如设置 x 轴和 y 轴的 label，设置图表的标题等。
以下是一个简单的散点图绘制示例：
-- -------------------- ---- ------- ----- ---- - - - -- -- -- -- -- - -- -- -- -- -- - -- -- -- -- -- - -- -- -- -- -- -- ----- ------- - - ------- ----- ------- ----- ------ ------ -- ------------------ ---------
结语
@xudafeng/plotjs 是一个非常实用的绘图工具，它使用起来非常简单，同时支持多种图表类型。使用它可以让我们更加便捷地绘制出漂亮的图表，使数据可视化更加生动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1881e8991b448e6e5e