介绍
mkgraph 是一个可以快速生成网格图形的 npm 包。它基于 D3.js 库，提供了一种简单且易于使用的方式来创建各种类型的图形。
在本文中，我们将详细介绍如何使用 mkgraph 包来创建单个坐标系、多个坐标系和多种类型的线条。此外，我们还将介绍如何通过定制化选项来进一步修改图形。
安装
在开始之前，您需要先安装 mkgraph 。安装方法如下：
npm install mkgraph
单个坐标系
我们首先来看如何使用 mkgraph 包来创建单个坐标系。我们将使用一个简单的示例来展示这个操作。
示例代码如下：
const mkgraph = require('mkgraph');
const data = [[{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 4 }]];
const options = { width: 600, height: 400 };
mkgraph.plot(data, options);上述代码将生成一个带有单个坐标系的图表，其 width 为 600 像素，height 为 400 像素，并展示了一条连接坐标点的带箭头的线条。data 列表包含三个对象，代表了三个坐标点。
如下图所示：
多个坐标系
现在我们来看下如何在同一个图表中使用多个坐标系。我们可以使用多个 mkgraph 实例来完成这个目标。
示例代码如下：
const mkgraph = require('mkgraph');
const data = [[{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 4 }]];
const data2 = [[{ x: 0, y: 0 }, { x: 1, y: 2 }, { x: 2, y: 3 }]];
const options = { width: 600, height: 400 };
const chart1 = mkgraph.plot(data, options);
const chart2 = mkgraph.plot(data2, options);上述代码将创建两个带有单个坐标系的图表，并在同一页面中展示。data 和 data2 分别代表了两个不同的数据集，我们将它们传递给对应的 mkgraph 实例以生成对应的图表。
如下图所示：
自定义线条
我们可以通过在选项中使用 line 选项来定制线条的属性，例如线条宽度、线条颜色和箭头大小等。
示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - --- -- -- -- - -- - -- -- -- - -- - -- -- -- - ----
----- ------- - -
------ ----
------- ----
----- -
------ ------
------ --
---------- ---
--
--
------------------ ---------上述代码将会生成一个带有红色、宽度为 2px、箭头大小为 10 的线条的图表。options 列表中的 line 属性是一个子选项，它包含了定制线条属性的选项。
如下图所示：
总结
本文中，我们使用了 mkgraph 包来创建了单个坐标系的图表、多个坐标系的图表并展示了创建自定义线条的方法。此外，我们也可以使用其他选项来进一步定制图形。 mkgraph 提供了一种易于使用的方式来创建各种类型的图表，并且适合任何类型的用户，无论是入门用户还是专业用户。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726681e8991b448e8987