文章导读

使用 Plotly.js 创建 Treemap：理解层级结构

作者 2025年9月9日 11

Treemap 是一种可视化分层数据的有效方式。plotly.js 提供了强大的 Treemap 功能，但理解其数据结构对于有效地使用它至关重要。本文将解释如何使用 labels 和 parents 数组在 Plotly.JS 中定义 Treemap 的层级结构，并提供示例代码帮助您快速上手。

理解 labels 和 parents 数组

Plotly.js 的 Treemap 通过两个关键数组 labels 和 parents 来定义层级关系。labels 数组包含所有要显示的节点名称，而 parents 数组则指定每个节点的父节点。这两个数组的顺序至关重要，parents[i] 对应于 labels[i] 的父节点。

labels: 包含 Treemap 中所有节点的名称。这些名称将显示在 Treemap 的各个区块中。
parents: 包含对应于 labels 数组中每个节点的父节点的名称。根节点的父节点通常设置为空字符串 “”。

构建 Treemap 数据

为了更好地理解 labels 和 parents 的关系，我们以一个 json 结构为例，将其转换为 Plotly.js Treemap 所需的数据格式。假设我们有以下 JSON 数据：

{     "root": { "topItem" },     "topItem": { "one", "two", "three" },     "one": { "something" },     "two": { "thing", "whatever" } }

首先，我们需要将所有节点名称提取到 labels 数组中：

const labels = ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"];

接下来，我们需要确定每个节点的父节点，并将其添加到 parents 数组中。注意，根节点 “root” 没有父节点，所以其对应的 parents 值为 “”。

Copilot

Copilot是由微软公司开发的一款AI生产力工具，旨在通过先进的人工智能技术，帮助用户快速完成各种任务，提升工作效率。

查看详情

const parents = ["", "root", "topItem", "topItem", "topItem", "one", "two", "two"];

现在，我们已经准备好了构建 Treemap 所需的数据。

Plotly.js 代码示例

以下代码展示了如何使用 labels 和 parents 数组在 Plotly.js 中创建 Treemap：

<!DOCTYPE html> <html> <head>   <title>Plotly Treemap Example</title>   <script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script> </head> <body>   <div id='chart'></div>    <script>     const data = [{       type: "treemap",       labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"],       parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two" ]     }];      Plotly.newPlot('chart', data);   </script> </body> </html>

这段代码首先引入 Plotly.js 库，然后在 HTML 页面中创建一个 div 元素，用于显示 Treemap。在 JavaScript 代码中，我们定义了 data 数组，其中包含了 type（设置为 “treemap”）、labels 和 parents 属性。最后，我们使用 Plotly.newPlot 函数将 Treemap 渲染到指定的 div 元素中。

注意事项

确保 labels 和 parents 数组的长度一致，否则会导致错误。
根节点的 parents 值必须为空字符串 “”。
parents 数组中的值必须是 labels 数组中已存在的节点名称。
Plotly.js 提供了丰富的配置选项，可以自定义 Treemap 的颜色、大小、层级显示等。请参考 Plotly.js 官方文档了解更多信息。

总结

通过本文的介绍，您应该已经掌握了使用 Plotly.js 创建 Treemap 的基本方法。理解 labels 和 parents 数组的含义是构建 Treemap 的关键。通过灵活运用这两个数组，您可以轻松地将分层数据可视化为清晰易懂的 Treemap。希望本文能够帮助您在数据可视化方面取得更大的进展。

以上就是使用 Plotly.javascript java html js json 数据可视化 JavaScript json html plotly 字符串数据结构 JS

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！