介绍
graphmilker 是一款帮助前端工程师更加轻松地从后端 API 获取数据并渲染成可视化图形的 npm 包。它提供简洁易用的 API，无需复杂的配置，只需配置好请求的接口地址和参数，即可快速将数据渲染为各种图形，如折线图、柱状图、散点图等。
安装
graphmilker 可以通过 npm 进行安装，可以在终端命令行中输入以下命令进行安装：
npm install graphmilker --save
使用
引入
在使用之前需要先引入 graphmilker 包，可以使用 import 或 require 进行引入：
import Graphmilker from 'graphmilker';
// 或者
const Graphmilker = require('graphmilker');配置
使用 graphmilker 需要配置请求的接口地址和参数，这里以柱状图为例：
const data = {
url: 'http://example.com/api/data',
type: 'bar',
xField: 'name',
yField: 'value',
};此时，我们请求的接口地址是 http://example.com/api/data，接口返回的数据类型是柱状图（type: 'bar'），x 轴绑定数据的是 name 字段，y 轴绑定的数据是 value 字段。
渲染
在配置完请求地址和参数后，可以调用 render() 方法进行渲染：
const graph = new Graphmilker(document.getElementById('container'), data);
graph.render();new Graphmilker() 接收两个参数，第一个是图形的容器，第二个是请求地址和参数。然后调用 render() 方法进行渲染。
示例
下面是一个完整的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ----------
-------
------
---- ---------------------
------- ----------------------------------------------------------------------------
----------------------------------------------------------------------------------- ------------------------
---------
--------
----- ---- - -
---- ------------------------------
----- ------
------- -------
------- --------
--
----- ----- - --- ------------------------------------------------- ------
---------------
---------
-------
-------以上例子是请求一个柱状图数据并渲染到 id 为 container 的 div 容器中。
总结
使用 graphmilker 上手非常简单，只需配置请求的接口地址和参数即可快速渲染各种图形。这使得前端工程师无需了解复杂的数据处理和绘图算法，将更多的精力放在业务逻辑上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f727758419a