Sunburst.js 是一个用于生成漂亮的旭日图的 JavaScript 库，简单易用，丰富的样式和可配置性可以让你快速定制出复合业务需求的旭日图。本文将介绍如何使用 npm 包 sunburst.js 进行旭日图的创建并进行实际的项目开发。
安装 sunburst.js
使用 npm 包管理工具可以方便快捷地安装 sunburst.js。
npm install sunburst-chart
安装完成后，就可以在项目中使用 sunburst.js 了。
创建旭日图
下面我将以一个简单的例子来创建旭日图。
HTML 代码
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------------
----- --------------- --
------- ------------------------------------------------------------------------
-------
------
---- -----------------
-------
-------JavaScript 代码
-- -------------------- ---- -------
------ -------- ---- -----------------
----- ---- - -
----- -------
------ -------
--------- -
-
----- ----
------ ----
--------- -
-
----- -----
------ ---
--
-
----- -----
------ ---
--
--
--
-
----- ----
------ ----
--------- -
-
----- -----
------ ---
--
-
----- -----
------ ---
--
--
--
--
--
----------
-------- ---------
-----
---我们使用 sunburst 函数创建了一个旭日图，把它插入到了 ID 为 chart 的元素中，然后传入一个数据对象作为参数。
配置项
sunburst.js 提供了丰富的配置项，可以用于调整旭日图的样式、大小、文字tooltip展示等方面。下面是一些常用的配置项，更多参数定义可查看官网。
element
需要在哪个元素内创建旭日图，使用选择器指定，例如 #chart，.chart。
data
绘制旭日图所需要的数据，格式为 json 对象，包括 name、value 和 children 三个属性。其中，value 是数值，用于表达占比，name 是字符串，表示名称。
-- -------------------- ---- -------
----- ---- - -
----- -------
------ ------- -- ----------
--------- -
-
----- ----
------ ----
--------- -
-
----- -----
------ ---
--
-
----- -----
------ ---
--
--
--
-
----- ----
------ ----
--------- -
-
----- -----
------ ---
--
-
----- -----
------ ---
--
--
--
--
--colors
节点颜色，格式对应 data 对象的层级。可选。
-- -------------------- ---- ------- ----- ------ - - ----- ------- ----- - --- ------- ----- - --- ------- ----- - - - ---- ------- ----- - - - ---- ------- ----- - - - ---- ------- ----- - - - ---- ------- -- ---------- -------- --------- ----- ------- ---
size
旭日图的宽和高。
sunburst({
element: '#chart',
data,
size: [800, 600],
});radius
旭日图的半径，为数值或者表示百分比的字符串。
sunburst({
element: '#chart',
data,
radius: '80%',
});tooltip
鼠标悬停时显示的提示文本。
const tooltip = ({ name, value }) => `${name}: ${value}`;
sunburst({
element: '#chart',
data,
tooltip,
});更多配置项可以在 github 上找到。
示例代码
下面我们演示一个高级使用方法，结合 csv 格式的数据通过 sunburst.js 叠加展示多层分组的旭日图，并调整每个分组的颜色和大小。
HTML 代码
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------------
----- --------------- --
------- ------------------------------------------------------------------------
-------
------
---- -----------------
-------
-------JavaScript 代码
-- -------------------- ---- -------
------ -------- ---- -----------------
------ - --- - ---- -----------
------ -------- -- -
----- ---- - ----- --------------- -- ------- ------- ------- ------- ------- ------ -- -- -
------ -
----- -------
--------- -
-
----- -------
--------- -
-
----- -------
------ --------
--
--
------ --------
--
--
------ --------
--
---
----- ------ - -
----- - --- -------
----- - - - ---- -------
----- - - - ---- -------
----- - - - ---- -------
----- - --- -------
----- - - - ---- -------
----- - - - ---- -------
----- - - - ---- -------
--
----- ---- - ----- -----
----- ------ - ------
----------
-------- ---------
-----
-------
-----
-------
---
-----data.csv：
-- -------------------- ---- ------- ----------------------------------------- ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------
结语
sunburst.js 是一款使用简单，扩展性好，针对交互需求进行优化的旭日图插件。旭日图是一种很好的可视化方案，可以用于分析、展示各种数据之间的分层关系。在实际应用中，可以根据需要调整颜色大小等属性，实现更好的定制化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a330d09270238223e8