在前端开发中，我们时常需要使用 chart 组件来展示数据，而 ZoomCharts 是一个非常优秀的 chart 库。而 zoomcharts_utils 则是 ZoomChart 的辅助工具包，可以在许多场合中帮助我们更便捷地使用 ZoomChart，本文将详细介绍如何使用 zoomcharts_utils。
安装
首先，我们需要在项目中安装 zoomcharts_utils，可以通过 npm 包管理器快速完成：
--- ------- ----------------
使用
初始化
使用 zoomcharts_utils 时，需要先初始化一个 ZoomCharts 实例：
----- ----- - --- ------------ ---------- ------------------ --------- - ------------------ ---- -- ----------- - ------------------- - -- ---
这里我们传入了三个参数：
container：指定 chart 的所在容器，可以是一个 string，也可以是一个类似document.getElementById()的 DOM 元素；advanced：开启 loadCustomModules 功能；navigation：初始化时指定视图的默认比例。
加载数据
加载数据时，我们可以使用 zoomcharts_utils 提供的 load 函数：
--------
--------
---- -- -
-- -----------
---------------
---- --------
----- -----
---
--
--- -- -
-- -----------
-------------------
-
--这里我们传入三个参数：
dataUrl：指定数据文件的路径；onSuccess：数据加载成功时的回调函数，可以在函数内部调用chart.addData添加数据；onError：当加载数据失败时的回调函数。
设置样式
设置样式时，我们可以使用 zoomcharts_utils 提供的 setStyle 函数：
------------------ -------- -
----- -
------ -------
----- --
------------ --
--
----- -
------ ------
------------ --
--
---这里我们传入三个参数：
chart：需要设置样式的 chart 实例；key：设置样式的数据 key，即上一步中添加数据时指定的 key；style：样式对象，具体可以参考 ZoomChart 的样式设置文档。
添加交互事件
添加交互事件时，我们可以使用 zoomcharts_utils 提供的 addEvent 函数：
------------------ ------------ ----- -- - ------------------- ---
这里我们传入三个参数：
chart：需要添加事件的 chart 实例；event：需要添加事件的事件名称，如上述的 clickNode；callback：事件发生时的回调函数。
示例代码
下面是一个完整的示例代码：
------ -- ---- -------------------
------ ---------- ---- -------------------
----- ----- - --- ------------
---------- ------------------
--------- - ------------------ ---- --
----------- - ------------------- - --
---
--------
------------
---- -- -
---------------
---- --------
----- -----
---
------------------ -------- -
----- -
------ -------
----- --
------------ --
--
----- -
------ ------
------------ --
--
---
------------------ ------------ ----- -- -
-------------------
---
--
--- -- ------------------
--通过上面的示例，我们可以看到，使用 zoomcharts_utils 可以帮助我们更方便地使用 ZoomCharts，大大减少了开发的时间和精力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005607081e8991b448de975