简介
i2djs 是一款基于 D3.js 的 JavaScript 图表库，提供了丰富的图表类型和交互式功能，能够帮助开发人员快速构建互动式的数据可视化图表。
安装
使用 npm 包管理工具进行安装：
npm install i2djs
使用
导入模块
import i2d from 'i2djs' import 'i2djs/dist/i2djs.css'
初始化
-- -------------------- ---- -------
----- -------- - ------------- -
------ -
----- -------
------- - ---- --- ------ --- ------- --- ----- -- --
------ ----
------- ----
--------------- --------
--
----- -
-- -------
-- --------- -----------
------- -
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- -
-
--
----- -
-- -
----- -------------
----------- --- ----
------ ------
--
-- -
-
--- --------
--------- -------
------ --------
----------- ------
--
-
--- ----------
--------- --------
------ ----------
----------- -------
-
-
-
--更新数据
i2dChart.updateData([
{ date: '2021-07-01', sales: 85, revenue: 3600 },
{ date: '2021-08-01', sales: 78, revenue: 3300 }
])销毁
i2dChart.destroy()
示例代码
折线图
-- -------------------- ---- -------
----- -------- - ------------- -
------ -
----- -------
------- - ---- --- ------ --- ------- --- ----- -- --
------ ----
------- ----
--------------- --------
--
----- -
-- -------
-- --------- -----------
------- -
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- --
- ----- ------------- ------ --- -------- ---- -
-
--
----- -
-- -
----- -------------
----------- --- ----
------ ------
--
-- -
-
--- --------
--------- -------
------ --------
----------- ------
--
-
--- ----------
--------- --------
------ ----------
----------- -------
-
-
-
--柱状图
-- -------------------- ---- -------
----- -------- - ------------- -
------ -
----- ------
------- - ---- --- ------ --- ------- --- ----- -- --
------ ----
------- ----
--------------- --------
--
----- -
-- --------
-- --------- -----------
------- -
- ------ ---------- ------ --- -------- ---- --
- ------ ----------- ------ --- -------- ---- --
- ------ -------- ------ --- -------- ---- --
- ------ -------- ------ --- -------- ---- --
- ------ ------ ------ --- -------- ---- --
- ------ ------- ------ --- -------- ---- -
-
--
----- -
-- -
------ -------
--
-- -
-
--- --------
--------- -------
------ --------
----------- ------
--
-
--- ----------
--------- --------
------ ----------
----------- -------
-
-
-
--结语
通过本文，我们熟悉了 i2djs 的使用方法，可以根据自己的需求快速构建出各种图表类型。 i2djs 还提供了丰富的交互式功能，例如提示框、缩放、拖拽等功能，这些功能能够帮助用户更加直观地理解数据。希望能够对大家有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63546